Question

我有以下React组件：

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isRendered: false
    }
  }

  render() {
    return (
      <div className="result">
        Rendering result
      </div>
    )
  }
}

根据this.state.isRendered的状态，我希望我的<div>组件呈现，如果状态为true，不呈现如果状态为false。

在React中组织它的最佳方法是什么？

Answer 1

只需检查this.state.isRendered中的render即可。在这里，我使用了简单的AND检查。单击按钮以更改状态并查看其工作原理（代码片段需要一段时间才能运行）：

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isRendered: false
    }
  }

  render() {
    const {
      isRendered
    } = this.state;

    return (
      <div>
      {isRendered &&
        <div className="result">
          Rendering result
        </div>
      }
      <button onClick={() => {this.setState({isRendered: !isRendered})}}>{isRendered? 'Hide' : 'Show'}</button>
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

<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="app"></div>

Answer 2

使用三元运算符检查isRendered是否为true，否则返回null：

class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      isRendered: false
    }
  }

  render() {
    return (
      <div>
      {this.state.isRendered ?
        <div className="result">
          Rendering result
        </div> : null
      }
      </div>
    )
  }
}

Answer 3

您可以为React组件返回null或false。因此，如果您不想要渲染任何内容，则可以执行以下操作：

  ...

  render() {
    if (!this.state.isRendered) return null

    return (
      <div className="result">
        Rendering result
      </div>
    )
  }

或者

  ...

  render() {
    return this.state.isRendered && (
      <div className="result">
        Rendering result
      </div>
    )
  }

Answer 4

您可以使用简单的条件三元运算符来执行此操作：

condition ? if_true_result : if_false_result

您的代码应该是这样的：

render() {
    const {isRendered} = this.state;
    return isRendered ?
       <div className="result">
         Rendering result
       </div>
     : ''
  }

另一种官方方式是遵循Reactjs文件中的条件渲染指南：https://reactjs.org/docs/conditional-rendering.html

Answer 5

有很多方法可以实现这个目标

{ this.state.isRendered ? 
<div className="result">
        This if the isRendered is true
      </div>
: <div className="result">
        This if the isRendered is false
      </div> }

React：基于状态的渲染

5 个答案: