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

Posted 2023-02-23

【中文标题】在 React 中将数据从孙子传递给父母

【英文标题】：Pass data from grandchild to parent in React

【发布时间】：2021-12-28 16:21:42

【问题描述】：

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

谢谢！

【问题讨论】：

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

【参考方案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 将作为函数传递，因此您可以在孙子组件或任何其他组件上调用它