react如何向外暴露方法

react如何向外暴露方法

在React中，组件可以通过多种方式向外暴露方法，以下是几种常见的方法：

使用ref暴露方法

在函数组件中，可以使用useImperativeHandle配合forwardRef来暴露方法给父组件。

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

const ChildComponent = forwardRef((props, ref) => {
  const doSomething = () => {
    console.log('Child method called');
  };

  useImperativeHandle(ref, () => ({
    doSomething
  }));

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

function ParentComponent() {
  const childRef = useRef();

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

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

通过props传递回调函数

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

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

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

function ParentComponent() {
  const handleChildAction = (data) => {
    console.log('Child action triggered with data:', data);
  };

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

使用自定义事件

对于更复杂的场景，可以使用自定义事件或事件总线来通信。

import { EventEmitter } from 'events';

const eventBus = new EventEmitter();

function ChildComponent() {
  const emitEvent = () => {
    eventBus.emit('customEvent', { data: 'some data' });
  };

  return <button onClick={emitEvent}>Emit Event</button>;
}

function ParentComponent() {
  React.useEffect(() => {
    const handler = (data) => {
      console.log('Event received:', data);
    };
    eventBus.on('customEvent', handler);
    return () => {
      eventBus.off('customEvent', handler);
    };
  }, []);

  return <ChildComponent />;
}

使用Context API

对于深层嵌套的组件，可以使用Context API来共享方法和状态。

const MyContext = React.createContext();

function ParentComponent() {
  const contextValue = {
    doSomething: () => {
      console.log('Method called from child');
    }
  };

  return (
    <MyContext.Provider value={contextValue}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { doSomething } = React.useContext(MyContext);

  return <button onClick={doSomething}>Call Context Method</button>;
}

选择哪种方法取决于具体的应用场景和组件结构。ref方法适合直接调用子组件方法，props回调适合简单的父子通信，事件总线适合跨组件通信，Context API适合深层嵌套组件共享方法。