如果给定了 onClick 道具，则设置 onClick答案

【问题标题】：Set onClick if onClick prop given如果给定了 onClick 道具，则设置 onClick
【发布时间】：2018-06-11 23:55:27
【问题描述】：

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

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

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

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

【问题讨论】：

标签： reactjs

【解决方案1】：

使用展开和三元运算符：

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

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

【讨论】：

对不起，我其实在这个组件里还有其他的道具。我只是把它们拿出来简化问题。当涉及到其他道具时，我该怎么做？
在rest 变量中，你有所有其他的道具。
另外，如果您想像我们为 onClick 所做的那样明确描述道具，您可以在此处有条件地定义它们：stackoverflow.com/a/50367186/4312466
我可以这样做吗？ onClick = onClick || null 然后设置onClick={onClick}?
我不确定设置null 处理程序是否会导致错误。如果是这样，您可以传递一个空函数，但在这两种情况下，您都将值设置为onClick。所以我更喜欢我回答你的方式。