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

【问题标题】：What does '&&' operator indicate with { this.props.children && React.cloneElement(this.props.children, { foo:this.foo})'&&' 运算符用 { this.props.children && React.cloneElement(this.props.children, { foo:this.foo}) 表示什么
【发布时间】：2017-04-02 14:22:14
【问题描述】：

我有使用反应路由器呈现的反应类。我知道 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>
        )
      }
    }

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

【问题讨论】：

标签： javascript node.js reactjs react-native react-router

【解决方案1】：

2022 年 2 月更新：

其实"&&"就是JavaScript操作符。

JavaScript 示例：

如果"state"为"true"，则"&&"的右侧值为"test" > 显示在控制台中：

let state = true // Here

function test() {
  return "test"
}

console.log(state && test()) // test

如果"state"为"false"，则"&&"的左侧值"false" > 显示在控制台中：

let state = false // Here

function test() {
  return "test"
}

console.log(state && test()) // false

反应示例：

如果"state"为"true"，则"&&"的右侧值为"test" > 以 HTML 显示：

let state = true // Here

function test() {
  return "test"
}

ReactDOM.render(
  <h1>{ state && test() }</h1>, // test
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是，如果"state"为"false"，则"&&""false" /strong> 不显示在 HTML 中：

let state = false // Here

function test() {
  return "test"
}

ReactDOM.render(
  <h1>{ state && test() }</h1>, // nothing displayed
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

其实在React的HTML中，布尔值"true"和"false"并不是显示：

ReactDOM.render(
  <h1>{ true } { false }</h1>, // nothing displayed
  document.getElementById("root")
);

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

【讨论】：

【解决方案2】：

这是短路评估

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

它的简写：

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

【讨论】：

看起来它节省了必须做的事情：null for ternaries

【解决方案3】：

简单来说，&& 的目的是：

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

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

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

那么Child1 和Child2 都将使用额外的道具foo 进行渲染。

但是如果这样使用父组件<Users/>或<Users></Users>，则没有子组件可以渲染。所以我们在调用React.cloneElement之前会进行检查。

&& 等价于布尔值AND: 1 AND A === A => 1 && A = A

|| 等价于布尔值OR： 1 OR A = 1 => 1 || A = 1

【讨论】：

【解决方案4】：

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

if( condition1 && condition2) {

}

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

(condition1 && condition2)

如果条件1 为真，则计算为条件2，如果条件1 为假，则为空。它实际上是...的简写。

if(condition1) {
    condition2;
}

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

(condition1 && <ReactElement />)

这实际上是......

if(condition1) {
    <ReactElement />
}

【讨论】：

所以condition2 并不是一个真正的条件，因为它只取决于condition1 ?

【解决方案5】：

当 && 和 ||以这种方式使用，他们被昵称为“短路操作员”。在这种用法中，可以将其视为“如果（某事为真）”的速成。所以，如果 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

【讨论】：

【解决方案6】：

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

【讨论】：