React组件render方法中条件判断失效问题咨询

嘿，我一眼就看出问题出在哪啦——你在JSX里定义了一个匿名箭头函数，但从来没调用它，所以里面的console.log("works!")和条件判断代码根本不会执行！

问题根源 #

你写的{() => {...}}只是在JSX里声明了一个函数，但并没有触发它执行。React在渲染时会把这个函数对象当成普通的表达式处理，不会执行函数内部的逻辑，自然你的条件判断就没效果啦。

解决方法 #

这里有两种常用的修复方式，你可以根据自己的场景选择：

方式一：直接在JSX表达式里写逻辑（适合简单判断）

把函数包裹去掉，用逗号表达式执行语句，再配合三元运算符实现条件渲染：

render() { 
  console.log("render") 
  return ( 
    <div className="cont"> 
      {
        console.log("works!"), // 用逗号表达式执行日志语句
        condition ? (
          <div className="btnnav" onClick={this.change} ></div>
        ) : null // 条件不满足时返回null，React会忽略这个节点
      } 
    </div>
  )
}

小提示：onClick={(event) => this.change(event)}可以简化成onClick={this.change}，因为事件对象会自动传递给事件处理函数~

方式二：抽成单独的渲染方法（适合复杂逻辑）

如果你的条件判断逻辑比较复杂，把它抽成组件内的一个方法会更清晰，记得在JSX里调用这个方法：

render() { 
  console.log("render") 

  // 单独定义渲染逻辑的方法
  const renderBtnNav = () => {
    console.log("works!")
    if (condition) {
      return <div className="btnnav" onClick={this.change} ></div>
    }
    // 必须返回一个React可以渲染的内容，比如null、空字符串或者其他组件
    return null;
  }

  return ( 
    <div className="cont"> 
      {renderBtnNav()} {/* 这里一定要调用函数，不然还是不会执行 */}
    </div>
  )
}

额外说明 #

React的JSX表达式{}里只能放表达式（比如变量、函数调用、三元运算），不能直接放语句（比如if、for）。如果要用到语句，要么把语句放在函数里再调用，要么用三元运算符、逻辑与（&&）这类表达式替代简单的条件判断。

内容的提问来源于stack exchange，提问作者Israel Martins