react js中的条件渲染（条件在另一个条件中）答案

【问题标题】：Conditional rendering in react js(Condition inside one more condition)react js中的条件渲染（条件在另一个条件中）
【发布时间】：2017-09-15 07:44:47
【问题描述】：

实际上我正在尝试在 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?

【问题讨论】：

返回块的代码是什么样的？
对不起兄弟，我没明白你的问题

标签： reactjs

【解决方案1】：

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

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

【讨论】：

感谢指正，但上面的代码不是我的原始代码，我只是举例说明我的问题.. ;-)

【解决方案2】：

根据您提供的代码，我相信您需要这样的封闭标签：

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

【讨论】：

【解决方案3】：

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

关于条件渲染，您可以考虑以下一些其他技巧：

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

【讨论】：