React+Typescript：cloneElement注入props的类型兼容与方案优化

1. 更优实现方案 #

这种通过cloneElement隐式注入属性的写法确实会增加组件耦合度，且类型友好度低，推荐以下两种替代方案：

• 方案1：Render Props 模式 #

  由Wrapper组件直接把需要注入的方法通过render函数回调传给子组件，类型完全透明，组件可独立使用：
  改造WrapperComponent：

  import React, { ReactNode } from 'react';
  
  interface WrapperProps {
    children: (greeting: () => void) => ReactNode;
  }
  
  export const WrapperComponent = ({children}: WrapperProps) => {
      const thisGreeting = (): void => { console.log('Hello!'); }
      return (
          <div className="wrapper">
              {children(thisGreeting)}
          </div>
      );
  }
  

  使用方式：

  <WrapperComponent>
    {(greeting) => <MyComponent name="me" age={99} greeting={greeting} />}
  </WrapperComponent>
  

• 方案2：Context 上下文模式 #

  适合注入的属性需要供多层子组件使用的场景：
  首先定义上下文：

  import { createContext, useContext, ReactElement } from 'react';
  
  // 注意统一greeting的类型，这里和Wrapper里的实现对齐为返回void
  const GreetingContext = createContext<() => void>(() => {});
  

  改造WrapperComponent：

  export const WrapperComponent = ({children}) => {
      const thisGreeting = (): void => { console.log('Hello!'); }
      return (
          <GreetingContext.Provider value={thisGreeting}>
              <div className="wrapper">
                  {children}
              </div>
          </GreetingContext.Provider>
      );
  }
  

  改造MyComponent，移除props中的greeting定义，改为从上下文获取：

  interface Props {
      name: string;
      age: number;
  }
  
  export const MyComponent = ({ name, age }: Props): ReactElement => {
     const greeting = useContext(GreetingContext);
     // 原有逻辑不变
  }
  

  使用方式和你原有写法完全一致，无类型报错，且MyComponent可通过在外层单独包裹GreetingContext.Provider实现独立使用。

2. 保留现有cloneElement写法的类型报错解决方案 #

如果确认要沿用现有实现，可以通过拆分Props类型的方式消除TS报错：
首先将MyComponent的Props拆分为内部完整类型和外部可用类型，导出组件时断言为外部类型：

import { ReactElement } from 'react';

// 组件内部使用的完整Props，包含greeting
interface InternalProps {
    name: string;
    age: number;
    // 注意先对齐类型，要么都返回string要么都返回void，这里示例统一为void
    greeting: () => void;
}
// 导出给外部用户使用的Props，移除需要注入的greeting属性
export type MyComponentProps = Omit<InternalProps, 'greeting'>;

export const MyComponent = ({ name, age, greeting }: InternalProps): ReactElement => {
   // 原有逻辑不变
} as unknown as React.FC<MyComponentProps>;

同时可以给WrapperComponent增加类型约束，避免注入的属性类型不匹配：

import React, { Children, cloneElement, ReactElement } from 'react';

interface WrapperProps {
  children: ReactElement<MyComponentProps> | ReactElement<MyComponentProps>[];
}

export const WrapperComponent = ({children}: WrapperProps) => {
    const thisGreeting = (): void => { console.log('Hello!'); }
    return (
        <div className="wrapper">
            {
                Children.map(children, (child) => cloneElement(child, {greeting: thisGreeting}))
            }
        </div>
    );
}

这样改造后你原有使用方式不会触发TS报错，同时保留了组件内部的类型校验。

注意：你当前代码中存在类型不匹配问题：MyComponent定义的greeting返回类型为string，但Wrapper中注入的thisGreeting返回类型为void，请先统一两者类型避免后续类型错误。

内容的提问来源于stack exchange，提问作者ebbishop