如何在 React 中将子道具存储到父状态？答案

【问题标题】：How to store child props to parent state in React?如何在 React 中将子道具存储到父状态？
【发布时间】：2021-11-21 16:16:58
【问题描述】：

我有一个Parent 组件，它接收child 和onSubmit 道具。 child 是具有任意 props 的任意功能组件。

例如

const Child = ( { name, onNameChange } ) => <> ... </>

// or

const Child = ( { description, onDescriptionChange } ) => <> ... </>

我想把子组件的props存储在父组件里面，以便

孩子对自己的道具进行更改（通过使用自己的道具）
当单击提交按钮时，父级可以使用子级道具将它们传递给提交函数。

const Parent = (
  {
    child: Child,
    onSubmit,
  },
) => {

  const childProps = 'What do I put here ?';
  
  const handleSubmit = () => {
    onSubmit(childProps);
  };

  return (
    <>
      <Child { ...childProps } />
      <button onClick={ () => { return handleSubmit(); } }>Submit</button>
    </>
  );
};

我该怎么做？

【问题讨论】：

您是否考虑过使用上下文？ reactjs.org/docs/context.html
上下文对我的情况有何帮助？解决方案应该仍然与childProps 无关，这是我正在努力寻找的

标签： reactjs react-props react-component react-state

【解决方案1】：

您可以通过在组件中声明子组件的道具将子组件传递给父组件（也称为祖父组件）来规避您的问题

const Parent = (
  {
    child: React.Node, // this child should already have the props it needs
    onSubmit: (model: any) => void, // wrap this function
  },
) => {

祖父母可以有一个带有签名(model: any) => void 的onSubmit 方法，它可以将其传递给父母。然后父级可以用它自己的函数处理程序包装这个onSubmit，它可以访问模型。然后将修改后的处理程序传递给onClick

【讨论】：

但这是我想要避免的。如果我有很多 Child 组件，我无法开始创建很多 GrandParent 组件
根据您提供的代码，您必须已经有一个祖父母。 Parent 传递了一个 Child 道具，因此定义了孩子应该是什么，并将其作为道具传递给父母。没有额外的工作。