如何为React.cloneElement的新Props添加TypeScript类型？

错误原因 #

TypeScript无法推断子元素接受setNewItemPopup这个自定义Props，因此需要明确定义子组件的Props类型，或给父组件的children指定兼容的类型约束。

解决方案 #

1. 定义共享的Props类型 #

先明确所有需要接收setNewItemPopup的子组件的通用Props类型：

import { Dispatch, SetStateAction, ReactElement } from 'react';

// 假设你已定义的弹窗属性类型
interface NewItemPopupProps {
  // 弹窗相关属性，比如title、visible等
}

// 定义子组件需要共享的Props类型
interface ChildWithPopupProps {
  setNewItemPopup: Dispatch<SetStateAction<NewItemPopupProps | null>>;
}

2. 约束父组件的Children类型 #

在父组件的Props中，指定children必须是接受ChildWithPopupProps的React元素：

interface ParentProps {
  children: ReactElement<ChildWithPopupProps> | ReactElement<ChildWithPopupProps>[];
}

export const ParentComponent = ({ children }: ParentProps) => {
  const [newItemPopup, setNewItemPopup] = useState<NewItemPopupProps | null>(null);

  const enhancedChildren = React.Children.toArray(children).map(child => {
    if (React.isValidElement(child)) {
      // 此时TypeScript已识别child接受setNewItemPopup，不会报错
      return React.cloneElement(child, { setNewItemPopup });
    }
    return child;
  });

  return <div>{enhancedChildren}</div>;
};

3. 子组件继承共享Props类型 #

所有需要接收setNewItemPopup的子组件，都要继承ChildWithPopupProps：

// 示例子组件Props
interface TodoListProps extends ChildWithPopupProps {
  todos: string[];
}

export const TodoList = ({ todos, setNewItemPopup }: TodoListProps) => {
  return (
    <div>
      {todos.map(todo => <div key={todo}>{todo}</div>)}
      <button onClick={() => setNewItemPopup({ title: 'Add Todo' })}>
        Add Todo
      </button>
    </div>
  );
};

临时方案（不推荐） #

如果不想严格约束子组件类型，可通过类型断言临时绕过检查，但会丢失类型安全：

return React.cloneElement(
  child as ReactElement<{ setNewItemPopup: typeof setNewItemPopup }>,
  { setNewItemPopup }
);

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