🚀 React进阶：如何用父组件管控子组件，实现灵活的组件通信今天来和大家分享一个我在项目中用到的超实用技巧——如何通

大家好！今天来和大家分享一个我在项目中用到的超实用技巧——如何通过React的父组件来管控子组件，实现灵活的组件通信。这个方法不仅可以用于封装表单组件、筛选组件，还可以应用于各种需要父组件与子组件交互的场景。🚀

背景故事

在开发过程中，我们经常遇到需要父组件与子组件交互的场景。比如：

父组件需要动态地向子组件传递值。
子组件需要将交互结果实时反馈给父组件。
父组件需要统一管理多个子组件的状态。

传统的做法要么是每个子组件单独管理状态，要么是通过复杂的回调函数来回传值，代码既冗长又难以维护。今天，我将分享一种更加优雅的实现方式，通过React的高级特性，让父组件与子组件的通信变得简单而高效。

实现思路

1. 父组件的核心逻辑

父组件是整个组件树的“大脑”，负责维护所有子组件的状态，并将这些状态通过props传递给子组件。同时，父组件还提供了一个onChange回调函数，子组件可以通过这个函数将值更新传递回父组件。

2. 子组件的通用接口

为了让子组件能够和父组件无缝通信，我定义了一个通用接口。每个子组件都需要有以下两个props：

field：标识子组件的字段名。
onChange：子组件调用这个函数来更新父组件的状态。

3. 动态注入props

这里用到了React的cloneElement和Children API。父组件通过Children.map遍历所有子组件，然后用cloneElement动态地为每个子组件注入onChange和initValue等props。这样一来，子组件就可以直接使用这些props来和父组件通信了。

4. 状态管理

父组件通过useState维护所有子组件的状态，并通过useImperativeHandle暴露这些状态给外部引用。这样，父组件可以实时获取子组件的值，并且可以动态地更新子组件的值。

代码实现

父组件代码

import React, { useImperativeHandle, useState, cloneElement, Children, forwardRef } from 'react';

interface RefType {
  allValues: AllValuesType;
}

interface PropsType {
  initAllValues: AllValuesType;
  children?: React.ReactNode;
}

interface AllValuesType {
  [key: string]: any;
}

const ParentComponent: React.ForwardRefRenderFunction<RefType, PropsType> = (
  props,
  ref
) => {
  const { initAllValues, children } = props;

  const [allValues, setAllValues] = useState<AllValuesType>({});

  useImperativeHandle(ref, () => ({
    allValues,
  }));

  const handleChildChange = (field: string, value: any) => {
    setAllValues((oldVal) => ({
      ...oldVal,
      [field]: value,
    }));
  };

  const renderChildren = () => {
    return Children.map(children, (child) => {
      if (!React.isValidElement(child)) return child;
      const field = child.props.field;
      return cloneElement(child, {
        ...child.props,
        onChange: handleChildChange,
        initValue: initAllValues[field] || null,
      });
    });
  };

  return (
    <div>
      <h1>父组件</h1>
      {renderChildren()}
    </div>
  );
};

export default forwardRef(ParentComponent);

子组件示例

import React from 'react';

interface ChildProps {
  field: string;
  onChange: (field: string, value: any) => void;
  initValue?: any;
}

const ChildComponent: React.FC<ChildProps> = ({ field, onChange, initValue }) => {
  const [value, setValue] = React.useState(initValue);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setValue(newValue);
    onChange(field, newValue);
  };

  return <input value={value} onChange={handleChange} />;
};

export default ChildComponent;

使用示例

import React, { useRef } from 'react';
import ParentComponent from './ParentComponent';
import ChildComponent from './ChildComponent';

const App = () => {
  const parentRef = useRef<any>(null);
  const [currentValues, setCurrentValues] = React.useState({
    field1: 'initial1',
    field2: 'initial2',
  });

  const handleOk = () => {
    console.log('所有子组件的值：', parentRef.current.allValues);
  };

  return (
    <div>
      <ParentComponent
        ref={parentRef}
        initAllValues={currentValues}
      >
        <ChildComponent field="field1" />
        <ChildComponent field="field2" />
      </ParentComponent>
      <button onClick={handleOk}>获取所有子组件的值</button>
    </div>
  );
};

export default App;

总结

通过这种方式，我们不仅实现了父组件对子组件的灵活管控，还让代码更加简洁易维护。这种实现方式可以应用于各种需要父组件与子组件交互的场景，比如表单、筛选组件、配置面板等。并且这种方式在很多组件库内广泛使用

希望这个技巧能帮到大家！如果你有更好的实现方式，也欢迎在评论区分享哦～ 😊