我如何选择在JSX中包含一个元素?下面是一个使用横幅的例子,如果它已经被传入,那么它应该在组件中。我想避免的是在if语句中重复HTML标记。

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

当前回答

还有一种技术使用渲染道具对组件进行条件渲染。它的好处是,在条件满足之前,渲染不会计算,因此不需要担心null和未定义的值。

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

其他回答

大多数例子都只有一行“html”,是有条件呈现的。当我有多行需要有条件地呈现时,这对我来说似乎是可读的。

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

第一个例子很好,因为我们可以有条件地呈现一些其他内容,如{this.props。showContent吗?内容:otherContent}

但如果你只是需要显示/隐藏内容,这是更好的,因为布尔值,Null和Undefined被忽略

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

你也可以这样写

{ this.state.banner && <div>{...}</div> }

如果你的州。Banner为空或未定义,则跳过右侧的条件。

只是留下旗帜为未定义,它不包括在内。

只是为了扩展@Jack Allan的回答,引用文档。

React基本(快速入门)文档建议在这种情况下为null。 然而,布尔值、Null和Undefined也会被忽略,详见高级指南。

很简单,创建一个函数。

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

这是我个人一直遵循的模式。使代码非常干净,易于理解。更重要的是,如果Banner变得太大(或在其他地方重用),它允许你将其重构到自己的组件中。