jsx if else快捷方式隐藏元素

Question

我可以

<p>Company: {{this.state.user.company}}</p>

但是有时候公司没有价值。那么我应该如何隐藏整个

公司财产是否为空？

我试过了

<p>({this.state.user.company} ? 'Company: ' + {this.state.user.company} : '')</p>

但这是行不通的。

Answer 1

React 不会渲染虚假值，因此您可以使用短路评估。如果this.state.user.company是null，它将被反应忽略。如果它是真的，react 将在 之后渲染元素&&。

render() {
    return (
        <div>
        {this.state.user.company &&
            <p>Company: {this.state.user.company}</p>
        }
        </div>
    );
}

Answer 2

Ori Drori答案的替代语法（我觉得这更容易阅读）：

render() {
  return (
    {this.state.user.company ? <p>Company: {this.state.user.company}</p> : null}
  )
}