ReactJS条件渲染IF / OR

Question

是否可以基于IF / OR语句呈现元素？

我尝试过类似的事情：

{!this.props.this || this.props.that && <button>Some button</button>}

但这不起作用。

Answer 1

我假设你想知道相当于

if (!this.props.this || this.props.that) {
  // Render the button
}

您的代码无法以这种方式工作的原因是&&和||的优先级。首先评估&&，但您确实希望首先评估组合条件。

您可以使用其他人建议的三元组，但技术上需要的只是括号

{(!this.props.this || this.props.that) && <button>Some button</button>}

这样，您就不需要多余的null

Answer 2

是的，这是可能的。 使用ternary operator：

{ 
  (!this.props.this || this.props.that) ? <button /> : null
}

您还可以使用React.Fragment渲染更复杂的元素结构而不使用容器，例如

{
  this.props.test ? (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  ) : null
}

请注意，当您返回 null 时，React会将其视为无需渲染。

Answer 3

official documentation对此非常好。我发现使用三元运算符最简洁，其工作方式如下：

{(!this.props.this || this.props.that) ? <button>Some button</button> : null }

如果为false，您可以使用不同的组件呈现，而不仅仅是null。