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

Question

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

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

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

Answer 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>