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

【问题标题】：Pass data from grandchild to parent in React在 React 中将数据从孙子传递给父母
【发布时间】：2021-12-28 16:21:42
【问题描述】：

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

谢谢！

【问题讨论】：

我认为 React Context API 是一个不错的选择，因为您可以将它提供给您想要的任意数量的文件，并且避免弄乱您的代码。

标签： javascript reactjs components react-props

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

然后在孙子组件上，您可以执行以下操作：道具.setState（数组）。所以现在在父组件上，变量 state 将使用来自孙子组件的值数组进行更新。

如果你想将状态传递给兄弟组件，我假设你的兄弟是父组件的兄弟，然后，您应该将状态从父级上移一级，假设父级的父级.. 并执行我上面描述的操作。

所以在你的组件树中创建 useState，并将 State 和 setState 作为 props 传递给子组件，setState 将作为函数传递，因此您可以在孙子组件或任何其他组件上调用它

【讨论】：