如何渲染独立组件并从父组件访问其内部状态与方法？

要实现不把状态移到父组件，同时让父组件能访问子组件内部的状态和函数，最简且符合React设计思想的方案是结合使用forwardRef、useImperativeHandle和useRef三个API，既保留子组件的独立封装性，又能按需暴露内部内容给父组件。

具体实现代码 #

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

const ParentComponent = () => {
  // 创建ref用于关联子组件
  const childRef = useRef(null);

  const handleParentZoom = () => {
    // 通过ref调用子组件暴露的方法
    childRef.current?.handleZoom();
  };

  return (
    <div>
      {/* 显示子组件内部的zoomLvl */}
      <p>Zoom level: {childRef.current?.zoomLvl}</p>
      <ChildComponent ref={childRef} />
      <button onClick={handleParentZoom}>Zoom In</button>
    </div>
  );
};

// 使用forwardRef让子组件接收父组件传递的ref
const ChildComponent = forwardRef((props, ref) => {
  const [zoomLvl, setZoomLvl] = useState(0);

  const handleZoom = () => {
    setZoomLvl(prev => prev + 2);
  };

  // 使用useImperativeHandle自定义暴露给父组件的内容
  useImperativeHandle(ref, () => ({
    // 暴露状态
    zoomLvl,
    // 暴露方法
    handleZoom
  }));

  return <div>子组件内容：当前缩放级别{zoomLvl}</div>;
});

关键部分说明 #

• forwardRef：让子组件能够接收父组件传递过来的ref，打破默认情况下子组件内部状态无法被父组件直接访问的封装限制。
• useImperativeHandle：自定义子组件通过ref暴露给父组件的内容，你可以精准控制哪些状态和方法允许父组件访问，避免过度暴露破坏封装性。
• 父组件的useRef：创建一个ref对象传递给子组件，通过这个对象就能获取到子组件暴露的所有内容。

注意事项 #

• 这种方式属于命令式操作，尽量不要滥用——React推荐声明式数据流，如果能通过props和回调实现需求，优先用声明式方案。只有当必须直接操作子组件内部状态/方法时再使用该方案。
• 状态依然保留在子组件内部，子组件的复用性不受影响，其他场景使用ChildComponent时，完全可以独立运行，无需依赖父组件的状态。

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung