我可以在 React 中使用多个布尔值进行条件渲染吗？答案

【问题标题】：Can I use multiple booleans for conditional rendering in React?我可以在 React 中使用多个布尔值进行条件渲染吗？
【发布时间】：2018-05-20 17:05:37
【问题描述】：

我想在 React 组件中执行以下操作：

<div>
    {this.props.isOpen && this.state.isReady && <div> Hello! </div>}
</div>

是否可以在 React 中使用多个布尔值来有条件地渲染组件？这有可能向用户呈现布尔值吗？

【问题讨论】：

正如@Sag1v 在下面指出的那样，您可以这样做，但我建议您不要这样做，因为最好的做法是将逻辑排除在视图之外，这会使阅读更加混乱，并且会导致在页面跳转中假设 props 和 state 可以更新，满足条件，然后 <div /> 会突然出现

标签： reactjs components conditional-rendering

【解决方案1】：

你可以做到。它将返回jsx 或null（不会渲染任何内容）。

条件为真时的示例：

const App = () => (
  <div>
    {true && true && <div> Hello! </div>}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

条件为假时的示例：

const App = () => (
  <div>
    {true && false && <div> Hello! </div>}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

我可以有条件渲染像{true && true ? <Text>true</Text> : <Text>false</Text> } 吗？我正在尝试，但它显示了两个文本
快速提示，如果您收到类似{false && true ? <Text>true</Text> : <Text>false</Text> } 的内容，它将返回文本 false，但是当您编写 {false && (true ? <Text>true</Text> : <Text>false</Text>) }（带括号）时，它不会返回任何内容。我想要第二个选项，但我不明白为什么我的文本是错误的