ReactJS 动态添加 onClick 事件

Question

我有一个反应功能组件，我想动态决定是否要在其上使用 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} />

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