在React中如何将子组件的props存储到父组件的state中

核心逻辑是在父组件内部维护子组件的属性状态，同时按照通用命名规则自动生成对应的状态更新函数传递给子组件，具体实现如下：

父组件完整代码 #

import { useState } from 'react';

const Parent = (
  {
    child: Child,
    onSubmit,
    // 新增初始属性参数，根据子组件需要的属性传入对应初始值
    initialChildProps = {}
  },
) => {
  // 维护子组件所有属性的状态
  const [childProps, setChildProps] = useState(initialChildProps);

  // 按照 on[属性名首字母大写]Change 的规则自动生成更新函数
  const changeHandlers = Object.fromEntries(
    Object.keys(childProps).map(key => {
      const handlerName = `on${key.charAt(0).toUpperCase() + key.slice(1)}Change`;
      return [
        handlerName,
        (newValue) => setChildProps(prev => ({ ...prev, [key]: newValue }))
      ];
    })
  );

  // 合并属性和更新函数传给子组件
  const childPassProps = {
    ...childProps,
    ...changeHandlers
  };

  const handleSubmit = () => {
    // 直接提交当前子组件的所有属性值
    onSubmit(childProps);
  };

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

使用示例 #

完全匹配你给出的子组件写法，不需要修改子组件逻辑：

1. 带name属性的子组件用法 #

// 子组件定义和你给出的示例完全一致
const Child = ( { name, onNameChange } ) => {
  return <input 
    value={name} 
    onChange={e => onNameChange(e.target.value)} 
    placeholder="输入姓名" 
  />
};

// 调用父组件
const App = () => {
  const handleSubmit = (data) => {
    console.log('提交的子组件数据：', data); // 输出 { name: '用户输入的内容' }
  };

  return <Parent 
    child={Child}
    onSubmit={handleSubmit}
    initialChildProps={{ name: '' }}
  />
};

2. 带description属性的子组件用法 #

// 子组件定义和你给出的示例完全一致
const Child = ( { description, onDescriptionChange } ) => {
  return <textarea 
    value={description} 
    onChange={e => onDescriptionChange(e.target.value)} 
    placeholder="输入描述" 
  />
};

// 调用父组件只需修改初始属性即可
const App = () => {
  const handleSubmit = (data) => {
    console.log('提交的子组件数据：', data); // 输出 { description: '用户输入的内容' }
  };

  return <Parent 
    child={Child}
    onSubmit={handleSubmit}
    initialChildProps={{ description: '' }}
  />
};

方案说明 #

• 完全满足两个需求：子组件可以通过自身接收的更新函数修改对应属性值，父组件提交时可以拿到子组件所有当前的属性值
• 适配任意符合命名约定的函数式子组件，多属性的子组件只需要在initialChildProps传入对应的初始字段即可
• 没有侵入子组件逻辑，不需要修改现有子组件的代码

内容的提问来源于stack exchange，提问作者entropyfeverone