React中如何根据条件为div元素添加或不添加onClick事件？

当然可以实现！你完全不用在事件处理函数里去判断状态，直接在render方法里就能根据canClick的值决定是否给div绑定onClick事件，下面给你两种常用的方案：

方案1：短路求值（&&） #

利用JavaScript的短路特性，当canClick为true时，会返回后面的this.handler；如果是false，则返回false，而React会自动忽略值为false/undefined/null的事件属性，不会绑定事件：

handler() {
  // 你的事件逻辑
}

render() {
  const { canClick } = this.state;
  return (
    <div onClick={canClick && this.handler}>hello</div>
  );
}

方案2：三元运算符 #

如果想要更明确地表达逻辑（比如需要给非点击状态显式设置null），可以用三元运算符：

handler() {
  // 你的事件逻辑
}

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

小提醒：注意this的绑定问题 #

如果你的handler函数里需要用到组件的this（比如访问this.state或this.props），记得提前绑定this，避免出现this指向错误的情况：

• 方法一：在构造函数中绑定

constructor(props) {
  super(props);
  this.handler = this.handler.bind(this);
}

• 方法二：用箭头函数定义事件处理函数

handler = () => {
  // 这里的this会自动指向组件实例，无需手动绑定
}

这样就能完美实现你想要的在render里直接控制事件绑定的需求啦！

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