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

当前回答

&& +代码风格+小组件

对我来说,这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值,如false、0或""。

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

做记号

ES7 stage-0 do符号语法也非常好,当我的IDE正确支持它时,我肯定会使用它:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

更多细节在这里:创建一个“If”组件…好主意?

其他回答

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

Ie:

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

我最近创建了https://github.com/ajwhite/render-if,以便仅在谓词通过时安全地呈现元素。

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

or

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

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

实验性的ES7 do语法使这很容易。如果你正在使用Babel,启用es7。doExpressions特性然后:

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

见http://wiki.ecmascript.org/doku.php?id=strawman: do_expressions

&& +代码风格+小组件

对我来说,这种简单的测试语法+代码风格的约定+小型集中组件是最易读的选项。您只需要特别注意假值,如false、0或""。

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

做记号

ES7 stage-0 do符号语法也非常好,当我的IDE正确支持它时,我肯定会使用它:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

更多细节在这里:创建一个“If”组件…好主意?