当前位置：首页 > React

react封装组件如何暴露变量

2026-01-25 06:45:55React

暴露组件变量的方法

在React中封装组件时，可以通过多种方式将内部变量或方法暴露给父组件或其他组件使用。以下是常见的实现方式：

通过ref转发 使用forwardRef和useImperativeHandle组合可以暴露特定方法或变量：

const ChildComponent = forwardRef((props, ref) => {
  const internalValue = 'exposed data';

  useImperativeHandle(ref, () => ({
    getValue: () => internalValue,
    customMethod: () => console.log('Method called')
  }));

  return <div>Child Component</div>;
});

// 父组件使用
function ParentComponent() {
  const childRef = useRef();

  useEffect(() => {
    console.log(childRef.current.getValue()); // 获取子组件暴露的值
    childRef.current.customMethod(); // 调用子组件方法
  }, []);

  return <ChildComponent ref={childRef} />;
}

通过props回调 将需要暴露的数据通过props回调函数传递给父组件：

function ChildComponent({ onExpose }) {
  const internalState = 'data';

  useEffect(() => {
    onExpose({
      value: internalState,
      method: () => console.log('Exposed method')
    });
  }, []);

  return <div>Child</div>;
}

function ParentComponent() {
  const handleExpose = (childAPI) => {
    console.log(childAPI.value);
    childAPI.method();
  };

  return <ChildComponent onExpose={handleExpose} />;
}

使用自定义hook 将组件逻辑提取为hook，直接返回需要暴露的变量：

function useCustomHook() {
  const exposedValue = 'hook data';
  const exposedMethod = () => console.log('hook method');

  return { exposedValue, exposedMethod };
}

function ParentComponent() {
  const { exposedValue, exposedMethod } = useCustomHook();

  useEffect(() => {
    exposedMethod();
  }, []);

  return <div>{exposedValue}</div>;
}

Context API共享状态 通过React Context跨层级共享变量：

const ExposeContext = createContext();

function ChildComponent() {
  const value = { data: 'context data', method: () => {} };

  return (
    <ExposeContext.Provider value={value}>
      <GrandChildComponent />
    </ExposeContext.Provider>
  );
}

function GrandChildComponent() {
  const { data, method } = useContext(ExposeContext);
  // 可直接使用暴露的变量和方法
}