当前位置：首页 > React

react如何对外提供方法

2026-03-11 11:32:12React

在 React 中对外提供方法

React 组件可以通过多种方式对外提供方法，以下是常见的几种实现方式：

使用 ref 暴露方法

通过 useImperativeHandle 钩子结合 forwardRef，可以将组件内部方法暴露给父组件：

import React, { forwardRef, useImperativeHandle } from 'react';

const ChildComponent = forwardRef((props, ref) => {
  const internalMethod = () => {
    console.log('Method called from parent');
  };

  useImperativeHandle(ref, () => ({
    exposedMethod: internalMethod
  }));

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

// 父组件调用
function ParentComponent() {
  const childRef = React.useRef();

  const handleClick = () => {
    childRef.current.exposedMethod();
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Child Method</button>
    </>
  );
}

通过 props 传递回调函数

父组件可以通过 props 传递回调函数，子组件在适当时机调用：

function ChildComponent({ onAction }) {
  const handleClick = () => {
    onAction('Data from child');
  };

  return <button onClick={handleClick}>Trigger Parent</button>;
}

function ParentComponent() {
  const handleChildAction = (data) => {
    console.log('Received:', data);
  };

  return <ChildComponent onAction={handleChildAction} />;
}

使用自定义 Hook

创建自定义 Hook 封装可复用的逻辑和方法：

function useCounter() {
  const [count, setCount] = React.useState(0);

  const increment = () => setCount(c => c + 1);
  const decrement = () => setCount(c => c - 1);

  return { count, increment, decrement };
}

function Component() {
  const counter = useCounter();

  return (
    <div>
      <span>{counter.count}</span>
      <button onClick={counter.increment}>+</button>
      <button onClick={counter.decrement}>-</button>
    </div>
  );
}

通过 Context 提供方法

使用 Context API 跨组件树共享方法：

const MethodContext = React.createContext();

function ParentComponent() {
  const sharedMethod = () => {
    console.log('Method available to all children');
  };

  return (
    <MethodContext.Provider value={{ sharedMethod }}>
      <ChildComponent />
    </MethodContext.Provider>
  );
}

function ChildComponent() {
  const { sharedMethod } = React.useContext(MethodContext);

  return <button onClick={sharedMethod}>Call Shared Method</button>;
}

类组件方法暴露

对于类组件，可以直接通过 ref 访问实例方法：

class ChildComponent extends React.Component {
  exposedMethod() {
    console.log('Class method called');
  }

  render() {
    return <div>Class Component</div>;
  }
}

function ParentComponent() {
  const childRef = React.createRef();

  const handleClick = () => {
    childRef.current.exposedMethod();
  };

  return (
    <>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>Call Class Method</button>
    </>
  );
}

选择哪种方式取决于具体场景：

react如何对外提供方法