javascript - 如何有条件地在 div 上添加或不添加 onClick？

Question

我想知道在我的例子中是否可以根据属性值 canClick 在 react 中的 div 元素上设置 onClick。

我知道我可以直接在 handler 中检查 this.state 而不是我正在寻找一个在 render 中实现的解决方案。

...
handler(){
}

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

Answer 1

条件如下:

onClick={canClick ? this.handler : undefined }

工作代码:

class App extends React.Component {
  
   _click(){
      // it will not print the value
      console.log('yes');
   }

   render(){
      return (
        <div>
          <div onClick={false ? this._click : undefined }>Click</div>
        </div>
      )
   }
}

ReactDOM.render(<App />, document.body);

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