JIYIK CN >

When we try to pass an element or a React component as a parameter to another component but the input parameter is incorrect, we get the error "JSX element type does not have any construct or call signatures". To fix this error, we need to use React.ElementTypethe type.

Below is sample code that produces the error.

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;

We are trying to pass a React component as a prop to the Wrapper component but it is already typed JSX.Element.

To fix this error, we have to type prop as 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;

Note that you can React.ElementTypepass a generic type for the attribute type that the element expects.

In this example, we have to pass it an object with a name property of type string, since this is the property taken by the title component.

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;

Now we have explicitly typed the props that the comp element takes when it is used. This helps us take advantage of auto-completion in our IDE when passing properties to components.

We can also use React.ComponentTypebut we need to input 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.ComponentTypeGenerics in do not default to anythe type, so we need to explicitly type props.

Note that if we passed a JSX element as props to the component instead of an actual component, then would JSX.Elementbe of the correct type.

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;

The results are shown as

We type the comp property JSX.Elementas since we are passing an actual JSX element (not a component) to the Wrapper component.

We are passing a JSX element because we are passing the prop as instead comp={<Heading />}of comp={(props) => <h2>Hello world</h2>}.

注意, in the first case, we passed a JSX element as a property, and in the second case, we passed a function that returns a JSX element (a functional component).

We should not try to use JSX elements as components in Wrapper components, e.g. don't do it <Comp />, instead {Comp}.

We didn't pass an actual component as a prop, we passed a JSX element, so it shouldn't be used as a component.

If none of the previous suggestions help, try updating your version of React typings by running the following command.

# 👇️ 使用 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