如果onClick prop

Question

我有一个可能会或可能不会收到onClick道具的组件。我想把这个非必需的道具作为点击处理程序。

const MyComponent = (props) => {
    let {onClick} = props;

    return (
        <div onClick={onClick}></div>
    );
}

如果我不知道是否会给出处理程序，那么最安全的方法是做这种事情吗？

Answer 1

使用spread和ternary运算符：

const MyComponent = ({ onClick, ...rest }) => {
  const props = onClick ? { onClick } : {}

  return <div { ...props } />
}