实际上，我试图在react 中隐藏和显示一些 html 元素。我创建了一个员工表单，其中我们有多个分区，例如个人信息、联系信息等...我在表单中创建了下一个和上一个按钮以显示和隐藏表单中的其他分区有一个分区，其中我们有教育要填写的详细信息，因此我选择保留加号和减号按钮以使用条件添加教育详细信息。
But finally, my problem is like i have complex conditions on **render** function:
{someCondition && <div>
{anotherCondition && <div></div>}
</div>}
But, i'm getting: *Adjacent JSX elements must be wrapped in an enclosing tag error*. So, what i'm supposed to do?
您必须先将它们包装在一个 div 中。此外，您的语法看起来有点错误（您错过了结束语}）。
{someCondition && (
<div>
{anotherCondition && <div></div>}
</div>
)}
根据您提供的代码，我相信您需要一个这样的封闭标签：
//div wraps everything else so the component can render.
<div>
{someCondition && <div>
{anotherCondition && <div></div>
</div>}
</div>
您必须始终返回一个包含其他元素的单个元素。
关于条件渲染，您可以考虑以下其他一些技巧：
A. 对于简单的条件，三元运算符已经足够干净了：
return condition ? <p>abc</p> : <p>def</p>
B. 为更简洁的代码或更复杂的 if-else 创建渲染函数
renderButton = () => {
if (isLoading) { return false }
if (something) {
return <div></div>
} else {
return <div></div>
}
}
render() {
return (
<div>
{ this.renderButton }
</div>
)
}
C. 同上，但不创建新函数：
render() {
return (
<div>
{
(()=>{
if (something) {
return <div></div>
} else {
return <div></div>
}
})()
}
</div>
)
}