react 子组件如何暴漏方法或者数据给父组件直接访问

在 React 中，子组件可以通过几种方式将方法或数据暴露给父组件，以便父组件可以直接访问。以下是几种常见的方法：

1. 使用 props 传递回调函数

父组件可以通过 props 向子组件传递一个回调函数，子组件可以在适当的时候调用这个回调函数并将数据或方法作为参数传递给父组件。

// 子组件
const ChildComponent = ({ onCustomEvent }) => {
  const customMethod = () => {
    // 自定义逻辑
  };

  const customData = { key: 'value' };

  return (
    <button onClick={() => onCustomEvent(customMethod, customData)}>
      触发自定义事件
    </button>
  );
};

// 父组件
const ParentComponent = () => {
  const handleCustomEvent = (method, data) => {
    // 访问子组件的方法
    method();

    // 访问子组件的数据
    console.log(data);
  };

  return <ChildComponent onCustomEvent={handleCustomEvent} />;
};

2. 使用 ref 和 useImperativeHandle

useImperativeHandle 与 forwardRef 结合使用，可以创建一个对子组件实例的引用，并通过这个引用暴露特定的方法或数据。

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

// 子组件
const ChildComponent = forwardRef((props, ref) => {
  useImperativeHandle(ref, () => ({
    customMethod: () => {
      // 自定义逻辑
    },
    customData: { key: 'value' }
  }));

  return <div>子组件内容</div>;
});

// 父组件
const ParentComponent = () => {
  const childRef = useRef();

  const accessChildMethods = () => {
    // 访问子组件的方法
    childRef.current.customMethod();

    // 访问子组件的数据
    console.log(childRef.current.customData);
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={accessChildMethods}>访问子组件方法</button>
    </div>
  );
};

3. 使用 context

通过 React 的 Context API，子组件可以将数据或方法传递给父组件及其所有子组件，而无需通过 props 一层层传递。

import React, { useContext, createContext } from 'react';

const MyContext = createContext();

// 子组件
const ChildComponent = () => {
  const { customMethod, customData } = useContext(MyContext);
  return (
    <div>
      <button onClick={customMethod}>调用方法</button>
      <div>{customData.key}</div>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  const customMethod = () => {
    // 自定义逻辑
  };
  const customData = { key: 'value' };

  return (
    <MyContext.Provider value={{ customMethod, customData }}>
      <ChildComponent />
    </MyContext.Provider>
  );
};

4. 使用状态提升

将状态提升到父组件，然后通过 props 将状态和用于修改状态的函数传递给子组件。这样，父组件可以直接访问和修改子组件的状态。

// 子组件
const ChildComponent = ({ value, setValue }) => {
  return (
    <div>
      <div>{value}</div>
      <button onClick={() => setValue('新值')}>修改值</button>
    </div>
  );
};

// 父组件
const ParentComponent = () => {
  const [value, setValue] = React.useState('初始值');

  return <ChildComponent value={value} setValue={setValue} />;
};

这些方法各有优缺点，选择哪种方法取决于你的具体需求和应用程序的结构。通常情况下，使用 props 传递回调函数是最常见和直接的方式，而 useImperativeHandle 和 ref 则适用于需要直接访问子组件实例方法的情况。