修复“‘组件’没有任何构造或调用签名。” Typescript 的默认道具错误

Posted 2023-02-21

【中文标题】修复“‘组件’没有任何构造或调用签名。” Typescript 的默认道具错误

【英文标题】：Fixing " 'Component' does not have any construct or call signatures." error for default props with Typescript

【发布时间】：2020-02-27 02:24:59

【问题描述】：

我有一个函数组件MyComponent，我正在尝试为component 设置一个默认属性，以便如果未提供，根节点将呈现为“跨度”。但我收到以下错误：

TS2604: JSX element type 'Component' does not have any construct or call signatures.

interface IMyComponentProps 
  component?: React.ElementType<React.htmlAttributes<HTMLElement>>;


const MyComponent: React.FunctionComponent<IMyComponentProps> = (
  className,
  component: Component, <-- complaining
  ...other
) => (
  <Component className=className
    ...other
  />
);

MyComponent.defaultProps = 
  component: 'span'
;

MyComponent.displayName = 'MyComponent';

export default MyComponent;

【参考方案1】：

我的评论不正确。尝试使用React.ComponentType 作为输入组件的类型。

interface IMyComponentProps 
  Component: React.ComponentType;


const MyComponent: React.FunctionComponent<IMyComponentProps> = (Component, ...other) => 
  return (<Component ...other />)
;

这需要像这样使用：

const Span = () => <span>Hey</span>

...

<MyComponent Component=Span/>

但是，这仍然存在将默认道具设置为字符串的问题。您需要将默认道具设置为返回跨度的 React 组件。这是一个高阶组件，因此需要一个 React 组件作为输入和输出。如果你只想传递一个 JSX 元素，你必须以不同的方式输入输入，而不是调用你的元素 prop 作为它自己的组件：

interface IMyComponentProps 
  Component: JSX.Element;


const MyComponent: React.FunctionComponent<IMyComponentProps> = (Component, ...other) => 
  return (<div>Component</div>)
;

...

<MyComponent Component=<span>Hey</span>/>

也许是更好的选择：

使用createElement 从字符串名称动态构建元素，我想不出另一种方法来实现这一点。这也为您提供了传递类/函数组件的选项（尽管该示例仅针对 FC 输入）。

interface IMyComponentProps 
  Component: React.FunctionComponent | string;
  textContent: string;


const MyComponent: React.FunctionComponent<IMyComponentProps> = (Component, children, textContent, ...other) => 
  const newComp = React.createElement(Component,   ...other , textContent);

  return newComp;
;

【讨论】：

我之前曾尝试在我的界面中使用 JSX.Element 和 React.ReactNode 作为类型，但将其更改为 React.ComponentType 就成功了。