react hooks组件间的传值方式(使用ts),子孙传值给祖先组件

在React Hooks中，子孙组件传值给祖先组件可以通过自定义Hook来实现。以下是一个使用TypeScript的例子：

首先，创建一个自定义Hook来管理状态和传递函数给子孙组件：

// useValueBetweenComponents.ts
import { useState, useCallback, useContext } from 'react';
 
export const ValueContext = React.createContext<{
  value: any,
  setValue: (value: any) => void,
} | null>(null);
 
export const useValueBetweenComponents = () => {
  const [value, setValue] = useState(null);
  const contextValue = { value, setValue };
 
  return {
    ValueProvider: (
      <ValueContext.Provider value={contextValue}>
        {children}
      </ValueContext.Provider>
    ),
    value,
    setValue: useCallback((newValue: any) => setValue(newValue), []),
  };
};

然后，在祖先组件中使用这个Hook，并渲染子组件：

// GrandparentComponent.tsx
import React from 'react';
import { useValueBetweenComponents } from './useValueBetweenComponents';
 
const GrandparentComponent: React.FC = () => {
  const { ValueProvider, value } = useValueBetweenComponents();
 
  return (
    <div>
      {/* 这里渲染子组件，子组件将可以通过Context传递值给祖先组件 */}
      {ValueProvider}
      <p>从子孙组件传递的值：{value}</p>
    </div>
  );
};

子孙组件使用Context来接收传递函数并更新值：

// DescendantComponent.tsx
import React, { useContext } from 'react';
import { ValueContext } from './useValueBetweenComponents';
 
const DescendantComponent: React.FC = () => {
  const { setValue } = useContext(ValueContext)!;
 
  // 当需要传值给祖先组件时，调用setValue函数
  const handleValueChange = (newValue: any) => {
    setValue(newValue);
  };
 
  return (
    <button onClick={() => handleValueChange('新的值')}>
      传值给祖先组件
    </button>
  );
};

在这个例子中，useValueBetweenComponents自定义Hook创建了一个Context，提供了一个状态和一个函数来更新这个状态。祖先组件使用这个Hook，并渲染子孙组件。子孙组件通过Context获取更新状态的函数，并在需要的时候调用它，将值传递给祖先组件。