这些条件在 React 渲染中不起作用 [重复]答案

【问题标题】：The conditions don't work in the React render [duplicate]这些条件在 React 渲染中不起作用 [重复]
【发布时间】：2018-08-30 16:34:51
【问题描述】：

render() {
   console.log("render")
         return (
      <div className="cont">

{() => {
  console.log("works!")

if(condition)
return(<div className="btnnav" onClick={(event) => this.change(event)} 
></div>)

}}

我尝试在 return 中添加一个条件，但出现此错误

【问题讨论】：

你用错了iife，也可以避免直接使用三元运算符进行条件渲染。

标签： javascript reactjs

【解决方案1】：

正如错误试图告诉你的那样，你是在告诉 React 打印一个函数，这实际上没有任何意义。

你需要调用函数：

{(() => { ... return ...}())}

【讨论】：

【解决方案2】：

你可以简化一下：

render() {
  return (
      <div className="cont">
      { condition && <div className="btnnav" onClick={(event) => this.change(event)}></div> }
      </div>
  );
}

【讨论】：