javascript - ReactJs - 创建一个 "If"组件……好主意吗？

Question

我在 React 文档中读到“if”类​​型的语句不能在 JSX 代码中使用，因为 JSX 呈现为 javascript 的方式，它不会像人们期望的那样工作。

但是有什么理由可以说明实现“if”组件不是一个好主意吗？从我最初的测试来看它似乎工作正常，这让我想知道为什么不经常这样做？

我的部分意图是让 React 开发尽可能多地基于标记——使用尽可能少的 javascript。对我来说，这种方法更像是一种“数据驱动”的方法。

您可以 check it out here on JS Fiddle

<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/JSXTransformer.js"></script>
<script type='text/javascript' src="https://unpkg.com/react@0.11.0/dist/react-with-addons.js"></script>

<script type="text/jsx">
/** @jsx React.DOM */
    
var If = React.createClass({
  displayName: 'If',

  render: function()
  {
    if (this.props.condition)
      return <span>{this.props.children}</span>
    return null;
  }
});

var Main = React.createClass({
    render: function() {
        return (
           <div>
             <If condition={false}>
                <div>Never showing false item</div>
             </If>
             <If condition={true}>
                <div>Showing true item</div>
             </If>
          </div>
        );
    }
});

React.renderComponent(<Main/>, document.body);
</script>

运行上面的结果:

Showing true item

Answer 1

查看 If-Else in JSX react 文档中的部分。

在 JSX 中，不能将语句放在花括号内——只能放在表达式中。如果您不知道 JavaScript 中表达式与语句之间的区别，请阅读此 article .此限制是因为 JSX 脱糖为函数调用，并且您不能将 if 语句用作 JavaScript 中函数的参数。但是，您可以使用 bool 运算符( && 、 || 和 ? : )来完成类似的工作。它们是表达式，因此它们可以放入 JSX 生成的构造函数调用中，并且它们的短路求值与 if 语句中使用的求值相同。

<div>
    {(true
        ? <div>Showing true item</div>     
        : <div>Never showing false item</div>
    )}
</div>
<p>My name is {this.name || "default name"}</p>

此外，React 会处理 null和 false作为不在真实 DOM 中呈现的“空组件”(目前它在幕后使用相同的 noscript 技巧)。当您不想要“else”分支时，这很有用。参见 False in JSX了解详情。

<div>
    {shouldIncludeChild ? <ChildComponent/> : false}
</div>

---

至于您询问的 If 组件，它存在的一个问题是，在其当前形式中，即使条件为假，它也会评估其子组件。当 If 的主体仅在条件为真时才有意义时，这可能会导致错误:

<If condition={person !== null}>
    //This code throws an exception if this.person is null
    <div>{person.name}</div>
</If>

您可以通过让 if 组件将主体作为函数而不是子组件列表接收来解决此问题，但它更冗长:

<If condition={person !== null} body={function(){
    return <div>{person.name}</div>
}/>

最后，由于 If 组件是无状态的，您应该考虑使用普通函数而不是新的组件类，因为这会使“If”对 React 的协调算法透明。如果您使用 If 组件，则 <div>和一个 <If><div>将被认为是不兼容的，React 将进行完全重绘，而不是尝试将新组件与旧组件合并。

// This custom if function is for purely illustrative purposes
// However, this idea of using callbacks to represent block of code
// is useful for defining your own control flow operators in other circumstances.
function myCustomIf(condition, onTrue, onFalse){
    onTrue  = onTrue  || function(){ return null }        
    onFalse = onFalse || function(){ return null }
    if(condition){
        return onTrue();
    }else{
        return onFalse();
    }
}

<div>    
    {myCustomIf(person !== null, function(){
         return <div>{person.name}</div>
     })}
</div>