React-作为子道具导入的组件中父组件的重用状态

Question

我想将事件道具从Child传递给Parent，所以当我们单击Child组件中的按钮时，应该会触发来自Parent的状态。

假设我们有两个组件，Parent和Child，但Child不会像这个一样直接导入到Parent中

export default function Parent() {
const [count, setCount] = useState(0);
const handleClick = num => {
setCount(current => current + num);
};
return (
<div>
<Child handleClick={handleClick} />
<h2>Count: {count}</h2>
</div>
);
}

在这种情况下，传递prop是非常困难的，但当我们遇到Parent不知道哪个组件将作为{children}prop传递的情况时，该怎么办，如下所示：

export default function Parent({children}) {
const [count, setCount] = useState(0);
const handleClick = num => {
setCount(current => current + num);
};
return (
<div>
{children}
</div>
);
}

然后我们导入一些子组件

<Parent>
<Child />
</Parent>

Answer 1

您可以将cloneElement与React.Children.map一起使用。cloneElement使用给定元素作为起点克隆并返回一个新的React元素。你可以在上面添加道具、参考和关键点。React.Children.map将在每个直接子级上调用一个函数。

//function body
....
let newChildren =  React.Children.map(children, (child) => React.cloneElement(child, { handleClick })
);
return (
<div>
{newChildren}
</div>
);

示例

Answer 2

这会将父对象与子对象耦合。children属性专门用于确保父母不关心孩子是什么。

推送状态&向上调用组件层次结构，使其成为既知道父组件又知道子组件的特定类型的组件。

const [count, setCount] = useState(0);
return (<Parent count={count}>
<Child onClick={num => setCount(count => count + num} />
</Parent>);

Answer 3

简单地说，您可以像这样通过cloneElement来实现这一点。

export const Parent = ({children}) => {
const handleClick = () => {
console.log('okk')
}
return (
<div>
{ React.cloneElement(children, { handleClick} )}
</div>
)}

现在您可以从子组件触发CCD_ 12函数。