React+TypeScript中SubmissionComponent属性的类型定义问题

问题核心 #

你混淆了React组件和React元素的概念：

• 你传入的const SubmissionComponent = <p>hi</p>是已经创建好的React元素（ReactElement），它是组件渲染后的实例，不能像组件那样用<SubmissionComponent/>的方式调用。
• 而<XXX/>语法要求XXX是组件（函数/类，具备构造或调用签名），这就是你所有报错的根源。

两种解决方案 #

方案1：直接渲染传入的React元素 #

如果保持现有传入方式（传已创建好的元素），那么在Submitter里直接渲染该元素即可，无需用组件调用语法：

import React from 'react';

// 类型定义用React.ReactNode或React.ReactElement都可以
type SubmitterProps = {
  SubmissionComponent: React.ReactNode;
};

const Submitter = ({ SubmissionComponent }: SubmitterProps) => {
  // 直接插入元素，不用写成<SubmissionComponent/>
  return <div>{SubmissionComponent}</div>;
};

// 使用方式不变
const SubmissionComponent = <p>hi</p>;
<Submitter SubmissionComponent={SubmissionComponent} />;

方案2：传入组件本身，以组件方式调用 #

如果希望在Submitter里用<SubmissionComponent/>的语法调用，那么需要传入组件（函数组件/类组件）而非已创建的元素：

import React from 'react';

// 传入的是组件，不是已渲染的元素
const SubmissionComponent = () => <p>hi</p>;

// 类型定义用React.FC（函数组件）或React.ComponentType（兼容函数/类组件）
type SubmitterProps = {
  SubmissionComponent: React.ComponentType;
};

const Submitter = ({ SubmissionComponent }: SubmitterProps) => {
  // 这里可以正常用组件调用语法
  return <div><SubmissionComponent /></div>;
};

<Submitter SubmissionComponent={SubmissionComponent} />;

之前报错的原因解析 #

1. 用React.ReactNode却写<SubmissionComponent/>：ReactNode包含元素、字符串、数字等多种类型，其中元素不具备组件的构造/调用签名，无法用组件语法调用。
2. 用React.FunctionComponent却传入元素：FunctionComponent是组件类型，而你传入的是元素实例，类型不匹配，导致赋值报错。
3. 用React.ReactElement仍报错：和第一种情况一致，元素不是组件，不能用<Element/>语法调用。

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