react+ts中函数组件父子通信方式

1. 父组件通过 Props 向子组件传递数据

这是最常见也是最基本的父子组件通信方式。父组件通过 props 将数据或回调函数传递给子组件。

示例代码：

// 子组件接收来自父组件的数据
interface ChildProps {
  message: string;
}

const ChildComponent: React.FC<ChildProps> = ({ message }) => {
  return <h1>{message}</h1>;
};

// 父组件向子组件传递数据
const ParentComponent = () => {
  const parentMessage = "Hello from Parent!";
  
  return (
    <ChildComponent message={parentMessage} />
  );
};

2. 子组件通过回调函数通知父组件

如果子组件需要与父组件交互，则可以通过父组件传递一个回调函数作为 prop，在子组件中调用该函数以通知父组件某些事件的发生。

示例代码：

interface ChildProps {
  onButtonClick: () => void;
}

const ChildComponent: React.FC<ChildProps> = ({ onButtonClick }) => {
  return (
    <button onClick={onButtonClick}>
      Click Me to Notify Parent
    </button>
  );
};


// 父组件提供回调函数处理逻辑
const ParentComponent = () => {
  const notifyParent = () => {
    console.log("Button clicked in child component!");
  };

  return (
    <ChildComponent onButtonClick={notifyParent} />
  );
};

3. 使用 Refs 访问子组件实例

虽然不建议频繁使用 refs 来管理子组件的状态或行为，但在特殊场景下仍然可行。可以结合 React.forwardRef 和 useImperativeHandle 来暴露子组件的功能供父组件调用。

示例代码：

// 子组件定义并通过 forwardRef 曝露功能
interface ChildProps{}

const ChildComponent = React.forwardRef((props:ChildProps, ref) => {
  const [count, setCount] = React.useState(0);
  // 暴露方法给父组件
  React.useImperativeHandle(ref, () => ({
    increment() {
      setCount(count + 1);
    },
    getCount(){
      return count
    }
  }));

  return <div>Current Count: {count}</div>;
});

export default ChildComponent;


// 父组件利用 useRef 获取子组件实例
const ParentComponent = () => {
  const childRef = React.useRef<any>();
  const handleClickIncrement = () => {
    childRef.current?.increment();
  };
  const childCount=childRef.current?.getCount()

  return (
    <>
      <button onClick={handleClickIncrement}>{childCount}</button>
      <ChildComponent ref={childRef} />
    </>
  );
};

4. 使用 Context 提供全局状态共享

对于复杂的应用程序结构，可能涉及多个层级间的通信需求。此时可以采用上下文 API (React.createContext) 来简化跨层通信过程。

示例代码：

// 创建 context 并设置默认值
const MyContext = React.createContext<string | null>(null);

// Provider 组件封装状态
const ContextProvider = ({ children }: { children: React.ReactNode }) => {
  const [value, setValue] = React.useState("Initial Value");

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


// 子组件消费 context 数据
const ChildComponent = () => {
  const contextValue = React.useContext(MyContext);

  return <p>Received From Context: {contextValue}</p>;
};


// 父组件嵌套 provider 及消费者
const ParentComponent = () => {
  return (
    <ContextProvider>
      <ChildComponent />
    </ContextProvider>
  );
};