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

Question

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

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

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

Answer 1

你可以的。它将 return 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>

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

Can I use multiple booleans for conditional rendering in React?

components

reactjs

conditional-rendering