reactjs - 我可以在 React 中使用多个 bool 值进行条件渲染吗？

Question

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

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

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

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>