ReactJS动态添加onClick事件

Question

我有一个react功能组件，我想动态决定是否要在其上放置onClick处理程序，如下所示：

const foo () => {
  let add_onClick = true;
  return (
    <div *(if add_onClick ==true then add an onClick event)*/>
  )
}

我认为我可以将组件转换为类，为该组件创建一个Ref，然后在componentDidMount中添加一个click eventListener，但是有没有更简单的方法呢？

Answer 1

如果您要记住：

let Foo = props => <div onClick={props.onClick} />

与以下内容完全相同：

let Foo = props => React.createElement('div', { onClick: props.onClick })

然后应该很容易看出如何选择传递道具。在JSX中，您可以执行以下操作：

let Foo = props => 
  <div 
    {...(props.onClick ? { onClick: props.onClick } : {})}
  />

当然，这有点愚蠢，特别是因为无论是否正确处理，您始终可以单击div。要解决您的确切问题，更好的解决方案是执行以下操作：

let doNothing = {} => {}
let Foo = ({ onClick = doNothing }) => <div onClick={onClick} />

这样，如果您忘记传递点击处理程序，则默认情况下仍会处理它，但是什么也不做。

Answer 2

尝试以下方法。除非您的值为true，否则onClick将为null：

<div onClick={add_onClick && () => {console.log("You clicked me!");}}></div>

Answer 3

你也可以这样做

const foo () => {
  let add_onClick = true;
  return (
    <div { ...add_onClick && { onClick: () => {} } }/>
  )
}