使用 reactjs 进行条件渲染

Question

我想根据条件向我的渲染对象添加一个 div。现在我正在使用这个代码

render() {
    return (
        <div>
            {this.test === this.someValue ? <div> some view </div> : <div> /div>}
            ...... // other components
        </div>
    )
}

这是有效的，但我不喜欢: <div> /div>，因为我不需要它。有没有办法只使用if 而不是if else？

Answer 1

您也可以只使用第一个条件并立即返回所需的组件，因为 JavaScript 具有 short-circuit 评估。

render() {
  return (
    <div>
     {this.test === this.someValue && <div> some view </div>}
     ......
    </div> 
  )
}

Answer 2

您可以返回null，而不是仅仅因为您必须有第二个条件而返回null

render() {
    return (
        <div>
            {this.test === this.someValue ? <div> some view </div> : null}
            ...... // other components
        </div>
    )
}