我如何选择在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>
    );
}

当前回答

你也可以这样写

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

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

其他回答

当你在"if"分支中有多个元素时,这个组件可以工作:

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

用法:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

附注:有些人认为这些组件不适合代码阅读。但在我看来,Html和javascript更糟糕

我做了https://www.npmjs.com/package/jsx-control-statements,让它更简单一点,基本上它允许你定义<If>条件作为标签,然后将它们编译成三元If,这样<If>中的代码只有在条件为真时才会执行。

正如在回答中已经提到的,JSX为您提供了两个选项

三元运算符 {this.state.price ?< div > {this.state。价格}</div>: null} 逻辑连接 {this.state. price && <div>{this.state. price。价格}< / div >}


但是,对于price == 0,这些不适用。

JSX将在第一种情况下呈现假分支,而在逻辑连接的情况下,将不呈现任何内容。如果该属性可能为0,只需在JSX外部使用If语句即可。

还有一个非常简洁的单行版本……{this.props.product.title || "No Title"}

Ie:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

在ES6中,你可以用简单的一行程序来实现

const If = ({children, show}) => show ? children : null

"show"是一个布尔值,你可以通过

<If show={true}> Will show </If>
<If show={false}> WON'T show </div> </If>