当前位置：首页 > React

react如何对外提供方法

2026-01-25 02:34:14React

在 React 中对外提供方法

React 组件可以通过 ref 或自定义 Hook 的方式对外暴露方法。以下是常见的实现方式：

使用 `forwardRef` 和 `useImperativeHandle`

通过 forwardRef 和 useImperativeHandle 可以显式地对外暴露组件内部方法。

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

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

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

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

// 使用
function App() {
  const myComponentRef = React.useRef();

  const handleClick = () => {
    myComponentRef.current.externalMethod();
  };

  return (
    <div>
      <MyComponent ref={myComponentRef} />
      <button onClick={handleClick}>Call Method</button>
    </div>
  );
}

通过 Props 传递回调函数

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

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

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

function ParentComponent() {
  const handleChildAction = (data) => {
    console.log(data);
  };

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

使用自定义 Hook

将逻辑封装为 Hook，其他组件可以直接调用 Hook 返回的方法。

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

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

  return { count, increment, decrement };
};

function CounterDisplay() {
  const { count, increment, decrement } = useCounter();

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

类组件中的方法暴露

类组件可以通过 ref 直接访问实例方法。

class MyClassComponent extends React.Component {
  publicMethod() {
    console.log('Public method called');
  }

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

function App() {
  const componentRef = React.createRef();

  const handleClick = () => {
    componentRef.current.publicMethod();
  };

  return (
    <div>
      <MyClassComponent ref={componentRef} />
      <button onClick={handleClick}>Call Method</button>
    </div>
  );
}