在React中将数据从孙子节点传递到父节点
在React中将数据从孙子节点传递到父节点
提问于 2021-11-17 17:03:09
您好，我在一个孙子组件中有一个名为info[]的数组，当单击一个按钮访问该数组时，我想要我的父组件。我还想要一个同级组件来访问它。这怎么可能..我有点困惑。我应该使用use-context吗？
谢谢！
回答 2
Stack Overflow用户
回答已采纳
发布于 2021-11-17 17:37:19
如果我知道你在问什么，它可能是这样的。
const GrandChild = ({ setParentInfo }) => {
const info = [1, 2, 3];
const handleClick = () => {
setParentInfo(info);
};
return <button onClick={handleClick}>Set parent info</button>;
};
const Sibling = ({ parentInfo }) => {
return <div>{parentInfo.length}</div>; // Do whatever you need with parentInfo
};
const Parent = () => {
const [parentInfo, setParentInfo] = useState([]);
return (
<div>
<GrandChild setParentInfo={setParentInfo} />
<Sibling parentInfo={parentInfo} />
</div>
);
};在这里你不需要上下文，因为你没有那么多的层，但是如果你需要深入道具而不是使用上下文。
Stack Overflow用户
发布于 2021-11-17 17:14:03
如果您想在应用程序中的许多不同组件之间共享状态，并且您认为将state作为道具传递是一段“非常漫长的旅程”，我想您可能应该考虑使用上下文挂钩之类的东西。
无论哪种方式，你刚才描述的似乎是一个简单的用例，它不需要上下文。
您应该做的是:在父组件上，您拥有状态，当前组件上的setState将setStat作为道具传递给子组件，然后从子组件将setState作为道具传递给子组件。
然后，在孙子组件上，您可以这样做:props.setState(数组)。因此，现在在父组件上，变量state将使用来自孙组件的值数组进行更新。
如果您想要将state传递给siblings组件，我假设您所说的siblings指的是父级的同级，那么您应该将状态从父级上移到上一级，比如说父级的父级。然后按照我上面描述的那样做。
因此，在组件树的较高位置创建useState，并将状态和setState作为属性传递给子组件，setState将作为函数传递，因此您可以在孙组件或任何其他组件上调用它
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70008646
复制相关文章
相似问题
腾讯云开发者
