如何使用React Hook将子组件中创建的数据传递给父组件

你的核心思路（将父组件的状态更新函数通过props逐层传递给深层子组件，子组件生成echarts实例后调用该函数将实例回传给父组件）是完全可行的，属于React中子组件向父组件传值的标准实现方式，只需修正现有代码中的几个问题即可正常运行。

• 组件命名不匹配：你导出的第二层子组件名称是Newvsresturnvisitors，但在SimpleCard中引入使用的名称是NewvsReturnVisitors，大小写拼写不一致会导致组件加载报错。
• 冗余的顶层调用：你在Newvsresturnvisitors组件顶层直接执行props.value(val)，会导致组件每次重渲染都触发父组件的状态更新，带来不必要的重渲染开销，且初始调用传入的是null值。
• 冗余的本地状态：Newvsresturnvisitors内部定义的val状态完全没有必要，不需要在子组件额外存储一份echarts实例，直接将实例传给父组件的更新函数即可。
• 缺少执行时机控制：renderChart函数没有绑定正确的执行时机，可能会出现组件DOM还未挂载就执行初始化逻辑的问题，同时也没有对应的实例销毁逻辑，容易产生内存泄漏。

第二层子组件（NewvsReturnVisitors） #

import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

// 统一组件命名，和导入时保持一致
const NewvsReturnVisitors = (props) => {
  const chart = useRef(null);
  // 移除冗余的本地val状态
  let chartInstance = null;

  function renderChart() {
    const renderInstance = echarts.getInstanceByDom(chart.current);
    if (renderInstance) {
      chartInstance = renderInstance;
    } else {
      chartInstance = echarts.init(chart.current, null, {
        width: 500,
        height: 300
      });
    }
    chartInstance.setOption(option);
    // 生成实例后再调用父组件的更新函数
    props.value(chartInstance);
  }

  useEffect(() => {
    // 组件挂载后执行初始化
    renderChart();
    // 组件卸载时销毁实例，避免内存泄漏
    return () => {
      chartInstance?.dispose();
    }
  }, []);

  // 给ref绑定对应的DOM元素即可
  return <div ref={chart}></div>
}
export default NewvsReturnVisitors;

其余组件调整 #

把SimpleCard组件中引入的子组件名称和导出的名称对齐即可，父组件和SimpleCard的原有逻辑无需额外修改。

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