什么'＆amp;＆amp;'运营商用{this.props.children＆amp;＆amp; amp; React.cloneElement（this.props.children，{foo：this.foo}）

Question

我有使用react路由器呈现的反应类。我知道React.cloneElement用于将元素从父元素传递给子元素。但为什么/＆amp;＆amp;＆amp;运营商做了这样的陈述：

class Users extends React.Component {
    getInitialState() {
      return {
          page:0
        }
     },      
    foo(){
        this.setState({'page':1})
     }
      render() {
        return (
          <div>
            <h2>Users</h2>
            { this.props.children && React.cloneElement(this.props.children, {
    foo:this.foo})
          </div>
        )
      }
    }

我想了解为什么我们使用'＆amp;＆amp;'运营商。

Answer 1

短路评估

(if this part is true) && (this part will execute)

简写：

if(condition){
   (this part will execute)
}

Answer 2

当＆amp;＆amp;和||以这种方式使用，他们被昵称为＆＃34;短路运营商＆＃34;。在这种用法中，它可以被认为是一个快速的＆＃34;如果（某事是真的）＆＃34;。因此，如果this.props.children不为null，它将调用React.cloneElement。如果为null，则不会调用React.cloneElement。

以下是官方React文档的链接，并进一步阅读：https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-with-logical-ampamp-operator

Answer 3

＆amp;＆amp;与您在任何javascript表达式中找到的操作符完全相同，例如...

if( condition1 && condition2) {

}

javascript的一个特性是表达式......

(condition1 && condition2)

如果condition1为true，则

将评估为condition2;如果condition1为false，则

将评估为null。它实际上是......的缩写。

if(condition1) {
    condition2;
}

我们使用这个简写，将React元素作为条件2放置，得到......

(condition1 && <ReactElement />)

实际上是......

if(condition1) {
    <ReactElement />
}

Answer 4

简单来说， speed = Math.min(speed+1, 10); 的目的是：

  

如果没有，请不要尝试克隆和渲染子项   孩子。

因此，如果你像这样使用&&：

Users

然后<Users> <Child1 /> <Child2 /> </Users> 和Child1都会使用其他道具Child2进行渲染。

但是如果以这种方式foo或<Users/>使用父级，则不会呈现子组件。因此，我们在调用<Users></Users>之前执行检查。

React.cloneElement相当于布尔值&&： AND =＆gt; 1 AND A === A

1 && A = A相当于布尔值||： OR =＆gt; 1 OR A = 1

Answer 5

您可以删除第一个子句并使用React.cloneElement(this.props.children, {foo:this.foo})，但它包含在您的示例中，以说明没有要呈现的子组件的情况。