解决 React 错误 JSX element type does not have any construct or call signatures

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

解决 React 错误 JSX element type does not have any construct or call signatures

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

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;

显示结果为

解决 React 错误 JSX element type does not have any construct or call signatures

我们将 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
免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 解决 React 错误 JSX element type does not have any construct or call signatures