在 React 中将数据从孙子传递给父

Question

你好，我在孙子组件中有一个名为 info[] 的数组，当单击按钮访问该数组时，我想要我的父组件。我还希望兄弟组件能够访问它。这怎么可能..我有点困惑。我应该使用 use-context 吗？

谢谢！

Answer 1

如果你想在你的应用程序中的许多不同组件之间共享状态，并且你认为将状态作为道具传递是“一个非常漫长的旅程”，我可能你应该考虑使用上下文钩子之类的东西.

无论哪种方式，您刚才描述的似乎都是一个简单的用例不需要上下文。

你应该做的是：在 parent 你有 [state, setState] 在当前组件上，将 setStat 作为 prop 传递给 child 组件，然后从 child 组件将 setState 作为 prop 传递给 grandchild 组件。

然后在 grandchild 组件上你可以做这样的事情： props.setState（数组）。所以现在在 parent 组件上，变量 state 将用来自 grandchild 组件的值数组更新。

如果你想将状态传递给 siblings 组件，我假设你所说的兄弟姐妹是 parent 的兄弟姐妹，然后你应该将状态从 parent 向上移动一个级别让我们说 parent 的 parent.. 然后做我上面描述的。

所以在组件树的高处创建 useState，并将 State 和 setState 也作为 props 传递给 children，setState 将作为函数传递，因此您可以在 grandchild 组件或任何其他组件

上调用它

Answer 2

如果我明白你问的是什么，可能是这样的。

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>
  );
};

在这里你不需要上下文，因为你没有那么多层，但是如果你需要深入了解道具而不是使用上下文。

在 React 中将数据从孙子传递给父

Pass data from grandchild to parent in React

javascript

reactjs

components

react-props