reactjs - 反应如何在道具中接收任何事件处理程序并将其添加到父元素

Question

对于功能组件，编写一个需要能够接受任何事件处理程序然后将其应用到组件的容器元素的组件的好方法是什么？

const Wrapper = (props) => {
    return <div ADD_ANY_EVENT_HANDLERS_FROM_PROPS></div>
}

谢谢。

Answer 1

@SanishJoseph 的答案似乎是正确的。谢谢。

const Wrapper = ({message}, ...rest) => {
    return <div {...rest}>{message}</div>
}

这允许在不提前知道它们将是什么的情况下传入任何事件处理程序组合。但是任何其他剩余的rest道具也会被添加，所以如果它们不应该被添加，它们可以被解构。

<Wrapper 
    message="test1"
    onClick={(e) => console.log("clicked")}
    onMouseEnter={(e) => console.log("mouseenter")}
/>

另一个例子：

<Wrapper 
    message="test2"
    onDoubleClick={(e) => console.log("double clicked")}
    onMouseLeave={(e) => console.log("mouseleave")}
/>