'&&' 运算符用 { this.props.children && React.cloneElement(this.props.children, { foo:this.foo}) 表示什么

IT技术 reactjs react-native react-router
2021-03-24 18:36:13

我有使用react-router呈现的react类。我知道 React.cloneElement 用于将元素从父级传递给子级。但是为什么/什么 '&&' 运算符对这种语句做了什么：

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>
        )
      }
    }

我想了解为什么我们在这里使用“&&”运算符。

5个回答

这是短路评价

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

它的简写：

if(condition){
   (this part will execute)
}
看起来它省去了 :null 三元组的麻烦
2021-05-30 18:36:13

&& 与您在任何 javascript 表达式中找到的运算符完全相同，例如...

if( condition1 && condition2) {

}

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

(condition1 && condition2)

如果条件 1 为真，则计算结果为条件 2；如果条件 1 为假，则计算结果为 null。它是...的有效简写

if(condition1) {
    condition2;
}

我们通过放置一个 React 元素作为条件 2 来使用这个速记，得到...

(condition1 && <ReactElement />)

这是有效的...

if(condition1) {
    <ReactElement />
}
所以condition2不是真正的条件，因为它只取决于condition1?
2021-06-21 18:36:13

当 && 和 || 以这种方式使用，它们被昵称为“短路运算符”。在这种用法中，它可以被认为是一个快速的“如果（某事是真的）”。所以，如果 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

简单来说，这样做的目的&&是：

当没有孩子时，不要尝试克隆和渲染孩子。

所以如果你Users像这样使用：

<Users>
   <Child1 />
   <Child2 />
</Users>

那么这两个Child1和Child2将得到呈现额外的propsfoo。

但是如果以这种方式使用父组件<Users/>or <Users></Users>，则没有要渲染的子组件。因此，我们在调用React.cloneElement.

&&相当于布尔值AND： 1 AND A === A =>1 && A = A

||相当于布尔值OR： 1 OR A = 1 =>1 || A = 1

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

其它你可能感兴趣的问题
上一篇在 React 中迭代 JSON 下一篇lit-element 和 React 之间的主要区别