处理 children.props

问题描述

所以，在 ParentComponent 中我有

<Component dropDownContent={<DropDownContent content={array} onSelect={handleSelect} />} />

我的 DropDownContent 看起来像这样

return (<ul>
   {content.map((item) => 
      { return <li><button onClick={()=> onSelect(array.id)}>{array.name}</button></li>}
   )}
</ul>)

即使我将 onSelect 作为道具添加到 Component 中，我能否对 DropDownContent 中的 Component 做一些事情？

谢谢:)

解决方法

我从你的问题中了解到，你想将一个函数从父组件传递给子组件。当单击子组件内的本地函数时，您想调用该传递的函数。如果是，那么这就是您的解决方案：

注意： 我不知道你写了什么代码以及你的组件由什么组成。所以我会通过一个简单的例子来给你答案，以充分理解解决方案。

在您的父组件中：

export const ParentComponent = props => {
    const handleSelect = () => console.log(`do something here`);
    return (
        <Component
            dropDownContent={
                <DropDownContent
                    content={array}
                    onSelect={() => handleSelect()}
                />}
        />
    )
}

在您的子组件中，您需要接收如下传递的函数：

export const ChildComponent = props => {
    const handlePassedFunction = () => props.onSelect?.();
    return (<ul>
        {content.map((item) => {
                return <li>
                    <button onClick={() => handlePassedFunction(array.id)}>{array.name}</button>
                </li>
            }
        )}
    </ul>)
}