Javascript 如何在react中有条件地添加或不单击div？

我想知道在react中是否可以基于属性值在div元素上设置

onClick

，在我的例子中是

canClick

我知道我可以直接在

处理程序

中检查这个.state，而不是在

渲染

中寻找实现的解决方案

。。。
handler（）{
}
render（）{
const{canClick}=this.state
返回(
你好
)
}
...

是您可以使用ternaru运算符，该运算符将左侧计算为布尔值，如果为true，则执行右侧或回退

<div onClick={() => canClick ? this.handler() : () => false }>hello</div>

canClick？this.handler（）：（）=>false}>hello

---

将条件如下：

onClick={canClick ? this.handler : undefined }

工作代码：

类应用程序扩展了React.Component{
_单击（）{
//它不会打印值
console.log（'yes'）；
}
render（）{
返回(
点击
)
}
}
render（，document.body）
您可以为此目的添加条件运算符

handler(){
}
render() {
  const { canClick} = this.state
  return (
      <div>
       {
        (canClick) ? 
         (<div onClick={this.handler}>clickble</div>) : 
         (<div>not clickble</div>)
        }
      </div>

  )
}

handler（）{
}
render（）{
const{canClick}=this.state
返回(
{
（canClick）？
（可点击）：
（不可点击）
}
)
}

以下是文档示例
我会这样做：

onClick={(canClick && this.handler) || null}



如果在此三元（即
false
或
null
）中选择不同的falsy值而不是
undefined
），React（当前）将抛出以下警告：

如果使用onClick={condition&&value}有条件地忽略它，请改为传递onClick={condition？value:undefined}

编辑2020-01-05：只有
false
会抛出上述错误（）。
您可以将元素属性（如onClick）视为对象属性。
使用“展开”操作符仅在条件下展开onClick：

<div
  {...(canClick && { onClick: this.handler })}
>
  hello
</div>


你好
你能给“或”添加一个链接引用吗？“我以前在js中从未见过它：）谢谢，它是一个英文单词，意思是任何一个：）当计算到
false
时，我仍然收到了错误。我在其他答案中成功地使用了
未定义的
。这是正确的答案，请使用这些人，没有必要像Mayank Shukla的上述答案那样创建onclick=“null”。太棒了！把它标记为完美answer@ChristiaanWesterbeek
null
可能不会抛出错误，但在prop树中仍将显示为
onClick:null
，这是不推荐的<代码>未定义
不会显示在道具树上。我更新了最上面的答案以反映这一点。这进一步将其从prop obj中完全删除，甚至删除了它们的键值。这应该是公认的答案。✅这不是真的，因为当onclick在div上启动时，它将调用一个函数，但未定义它是一个函数，代码将爆炸。代码不会爆炸，我只是再次运行此代码，它工作正常。如果事件侦听器的值为
undefined
，则它不会附加到DOM节点。上面的JSX通过
React.createElement
转换为一个对象，包括它的道具。在DOM中创建/更新实际节点时，任何值为
undefined
的内容都将被忽略，并且不会使用。感谢您对源代码的参考。代码只会“爆炸”，意思是当您通过false时发出警告。但是当传递
null
或
undefined
时，您就可以了。不要这样做。见以上答案。
<div
  {...(canClick && { onClick: this.handler })}
>
  hello
</div>