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

Question

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

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

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

Answer 1

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

条件为真时的示例：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

条件为假时的示例：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;