如何使用 React Hook 将在子进程中创建的数据发送给父进程？

Question

如问题所述，我想做的是将子值从子传递给父。我想在我的父函数中调用子变量。

家长代码

function App() {

  let [value, setVal] = useState(null);
  ...
  const onLayoutChange = (layout) => {
    console.log(value);
    if (value != null) {
      value.resize();
    }
    //   chartInstance.resize();
  };

  return (
    <ResponsiveGridLayout
      layouts={layout}
      onLayoutChange={() => onLayoutChange(layout)}
    >
      <div key="1">
        <Card style={styles} val={setVal} />
      </div>
    </ResponsiveGridLayout>
  );
}

#1 儿童代码

export default function SimpleCard(props) {
 
  return (
    <Card style={props.style.main}>
      <CardContent>
        <NewvsReturnVisitors value={props.val} />
      </CardContent>
    </Card>
  );
}

#2 儿童代码

const Newvsresturnvisitors = (props) => {
  ...
  let [val, setVal] = useState(null);

  let chartInstance = null;
  props.value(val);

  function renderChart() {
    const renderInstance = echarts.getInstanceByDom(chart.current);

    if (renderInstance) {
      chartInstance = renderInstance;
      setVal(chartInstance);
    } else {
      chartInstance = echarts.init(chart.current, null, {
        width: 500,
        height: 300
      });

      setVal(chartInstance);
      // chartInstance.resize();
    }
    chartInstance.setOption(option);
  }
  ...
}
export default Newvsresturnvisitors;

我不确定这是否可行，非常感谢任何建议。

这是我的 codesandboxlink

Answer 1

可以在父组件中创建状态变量，然后将setXXX方法传递给子组件，在子组件中调用setXXX方法将变量传递给父组件。

Answer 2

const changeLayout = (layout) => {
    //   chartInstance.resize();
  };


<ResponsiveGridLayout
      layouts={layout}
      onLayoutChange={changeLayout}
    >

试试这样使用道具li

如何使用 React Hook 将在子进程中创建的数据发送给父进程？

How to send data created in child to parent using react hook?

reactjs

echarts