React开发中如何将子组件useState定义的状态值传递到父组件渲染

React 中父组件要获取子组件内部状态，可以根据场景选择下面两种实现方式：

方案1：状态提升（最推荐，适配当前场景） #

将原本维护在子组件内部的状态移动到父组件中，再把状态更新函数通过 props 传递给子组件调用即可，符合 React 单向数据流的设计逻辑，修改后的代码如下：

import { useState } from 'react';

function ChildA({ onChange }) {
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={onChange}
      />
    </div>
  );
}

const ChildB = ({ onChange }) => {
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={onChange}
      />
    </div>
  );
};

function App() {
  // 状态统一提升到父组件维护
  const [solutestate, setSolutestate] = useState("");
  const [solventstate, setSolventstate] = useState("");

  return (
    <div className="App">
      <ChildA onChange={setSolutestate} />
      <ChildB onChange={setSolventstate} />

      <div>{solutestate}</div>
      <div>{solventstate}</div>
    </div>
  );
}

方案2：通过ref暴露子组件状态（适合子组件逻辑复杂、不便抽离状态的场景） #

如果子组件内部逻辑较重，不适合把状态迁移到父组件，可以用 forwardRef 配合 useImperativeHandle 把子组件需要对外暴露的状态/方法开放给父组件调用，示例代码如下：

import { useState, forwardRef, useImperativeHandle, useRef } from 'react';

// 用forwardRef包裹子组件，接收父组件传递的ref
const ChildA = forwardRef((props, ref) => {
  const [solutestate, setsolutestate] = useState("");
  // 定义要暴露给父组件的内容
  useImperativeHandle(ref, () => ({
    solutestate
  }));
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolutestate}
      />
    </div>
  );
});

const ChildB = forwardRef((props, ref) => {
  const [solventstate, setsolventstate] = useState("");
  useImperativeHandle(ref, () => ({
    solventstate
  }));
  return (
    <div>
      <Jsme
        height="300px"
        width="400px"
        options="oldlook,star"
        onChange={setsolventstate}
      />
    </div>
  );
});

function App() {
  // 定义ref绑定对应子组件
  const childARef = useRef(null);
  const childBRef = useRef(null);
  // 通过ref读取子组件暴露的状态
  const solutestate = childARef.current?.solutestate ?? '';
  const solventstate = childBRef.current?.solventstate ?? '';

  return (
    <div className="App">
      <ChildA ref={childARef} />
      <ChildB ref={childBRef} />

      <div>{solutestate}</div>
      <div>{solventstate}</div>
    </div>
  );
}

注意该方案默认状态更新不会触发父组件重渲染，如果需要子组件状态更新时父组件同步渲染，可以在子组件状态回调中额外调用父组件传递的更新函数触发重渲染。

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