迹忆客 专注技术分享

当我们尝试将元素或 React 组件作为参数传递给另一个组件但输入的参数不正确时，会出现错误“JSX element type does not have any construct or call signatures”。 要解决该错误，需要使用 React.ElementType 类型。

下面是产生该错误的示例代码。

import React from 'react';

interface Props {
  comp: JSX.Element;
}

const Wrapper: React.FunctionComponent<Props> = props => {
  const {comp: Comp} = props;
  // ⛔️ JSX element type 'Comp' does not have any construct or call signatures.ts(2604)
  return (
    <div>
      <Comp name="jiyik.com" />
    </div>
  );
};

const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};

export default App;

我们试图将 React 组件作为 prop 传递给 Wrapper 组件，但已将其键入为 JSX.Element。

为了解决这个错误，我们必须将 prop 键入为 React.ElementType。

import React from 'react';

interface Props {
  comp: React.ElementType; // 👈️  React.ElementType
}

const Wrapper: React.FunctionComponent<Props> = props => {
  // 👇️ 组件名称必须以大写字母开头
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="jiyik.com" />
    </div>
  );
};

const App: React.FunctionComponent = () => {
  // 👇️ 获取 name 参数
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};

export default App;

请注意，可以为 React.ElementType 传递元素期望的属性类型的泛型。

在这个例子中，我们必须向它传递一个具有字符串类型名称属性的对象，因为这是标题组件所采用的属性。

import React from 'react';

interface Props {
  // ✅ 显式输入属性 name
  comp: React.ElementType<{name: string}>;
}

const Wrapper: React.FunctionComponent<Props> = props => {
  // 👇️ 组件名称必须以大写字母开头
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="jiyik.com" />
    </div>
  );
};

const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};

export default App;

现在我们显式地键入了 comp 元素在使用时所采用的 props。 这有助于我们在将属性传递给组件时利用我们的 IDE 进行自动完成。

我们也可以使用 React.ComponentType 但是我们需要输入 props。

import React from 'react';

interface Props {
  // 👇️ 现在使用 React.ComponentType 👇️
  comp: React.ComponentType<{name: string}>;
}

const Wrapper: React.FunctionComponent<Props> = props => {
  // 👇️ 组件名称必须以大写字母开头
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="jiyik.com" />
    </div>
  );
};

const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};

export default App;

React.ComponentType 中的泛型不默认为 any 类型，因此我们需要显式键入 props。

请注意，如果我们将 JSX 元素作为 props 传递给组件而不是实际组件，则 JSX.Element 是正确的类型。

import React from 'react';

interface Props {
  // 👇️ 使用 JSX.Element 类型
  comp: JSX.Element;
}

const Wrapper: React.FunctionComponent<Props> = props => {
  const {comp: Comp} = props;

  // 👇️ use as {Comp}
  return <div>{Comp}</div>;
};

const App: React.FunctionComponent = () => {
  const Heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;

  // 👇️ 我们传递了一个实际的 JSX 元素，因为我们没有将它作为 comp={Heading} 传递
  return (
    <div>
      <Wrapper comp={<Heading name="jiyik.com" />} />
    </div>
  );
};

export default App;

显示结果为

我们将 comp 属性键入为 JSX.Element ，因为我们将实际的 JSX 元素（不是组件）传递给 Wrapper 组件。

我们正在传递一个 JSX 元素，因为我们将 prop 传递为 comp={<Heading />} 而不是 comp={(props) => <h2>Hello world</h2>}。

注意 ，在第一种情况下，我们传递了一个 JSX 元素作为属性，而在第二种情况下，我们传递了一个返回 JSX 元素（功能组件）的函数。

我们不应该尝试将 JSX 元素用作 Wrapper 组件中的组件，例如 不要做<Comp />，而是{Comp}。

我们没有传递一个实际的组件作为属性，我们传递了一个 JSX 元素，所以它不应该被用作一个组件。

如果之前的建议都没有帮助，请尝试通过运行以下命令来更新 React 类型的版本。

# 👇️ 使用 NPM
$ npm install react@latest react-dom@latest

$ npm install --save-dev @types/react@latest @types/react-dom@latest

# ----------------------------------------------

# 👇️ 使用 YARN
$ yarn add react@latest react-dom@latest

$ yarn add @types/react@latest @types/react-dom@latest --dev