Question

实际上我正在隐藏并显示反应中的某些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?

Answer 1

你必须首先将它们包装在div中。此外，您的语法看起来有点不对（错过了结束}）。

{someCondition && (
  <div>
    {anotherCondition && <div></div>}
  </div>
)}

Answer 2

从你提供的代码中，我相信你需要一个这样的封闭标签：

//div wraps everything else so the component can render.
<div>
{someCondition && <div>
{anotherCondition && <div></div>
</div>}
</div>

Answer 3

您必须始终返回包含其他元素的单个元素。

关于条件渲染，以下是您可以考虑的其他一些提示：

一个。对于简单的条件，三元算子足够干净：

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>
  )
}

℃。与上面相同，但没有创建新功能：

render() {
  return (
    <div>
    {
      (()=>{
        if (something) {
          return <div></div>
        } else {
          return <div></div>
        }
      })()
    }
    </div>
  )
}

反应js中的条件渲染（条件在另一个条件内）

3 个答案: