React中父组件如何动态设置并获取子组件MyColorPicker的值

核心采用React通用的**状态提升（受控组件）**模式，将原本存放在子组件内部的颜色状态迁移到父组件统一管理，从根源上满足动态传值、父组件取数的需求。

实现步骤 #

1. 改造父组件逻辑 #

• 在父组件中通过useState初始化颜色值，作为颜色状态的唯一数据源
• 将颜色值通过prop传入子组件，同时传入颜色变化的回调函数，接收子组件抛上来的最新颜色值
• 提交逻辑中直接读取父组件自身存储的颜色值，无需跨组件取值
• 有动态更新颜色的需求时，直接调用状态更新函数即可，无需额外操作子组件

改造后的父组件示例代码：

// imports...
import { useState, useCallback } from 'react';

function myFunctionA(props) {
  // 统一管理颜色状态
  const [pickerColor, setPickerColor] = useState('#ff0000');

  const handleSubmit = useCallback(() => {
    // 直接从父组件状态读取当前颜色值
    console.log('选中的颜色值：', pickerColor);
    // 其他原有提交逻辑
  }, [pickerColor]);

  // 动态更新颜色的场景：比如点击快捷选色按钮、从其他表单值同步时，直接调用 setPickerColor 即可
  // 例：setPickerColor('#00ff00') 即可直接更新选择器显示的颜色

  return (
    <>
      <Form onSubmit={handleSubmit}>
        <MyColorPicker 
          background={pickerColor}
          onColorChange={setPickerColor}
        />
      </Form>
    </>
  )
}

2. 改造MyColorPicker类组件为完全受控 #

• 移除子组件内部自管理的颜色state，直接读取父组件传入的prop值渲染
• 颜色选中完成后，不再更新自身state，而是调用父组件传入的回调，将最新颜色值抛给父组件

这里要特别说明：原子组件把prop值拷贝到内部state的写法是常见的使用误区，只会在组件首次挂载时读取一次prop值，后续父组件修改传入的prop时，子组件的内部状态不会跟着同步更新，这也是目前没法动态调整颜色的核心原因

改造后的子组件示例代码：

// imports...

class MyBlockPicker extends React.Component {
  handleChangeComplete = (color) => {
    // 将最新颜色值通过回调传递给父组件
    this.props.onColorChange(color.hex);
  };

  render() {
    return (
      <BlockPicker
        color={this.props.background}
        onChangeComplete={this.handleChangeComplete}
        triangle="hide"
      />
    );
  }
}

export default MyBlockPicker;

特殊场景的备选方案 #

如果业务场景有特殊限制，必须保留子组件对颜色值的内部管理权，也可以在父组件中通过useRef创建对子组件的实例引用，提交时通过ref访问子组件内部存储的颜色值完成取数。但这种方式会让父子组件产生强耦合，后续扩展和维护的成本更高，没有特殊需求的话优先使用上面的受控组件实现方式。

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