快捷導(dǎo)航

解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures

更新時間：2022年12月02日 10:52:18 作者：Borislav?Hadzhiev

這篇文章主要為大家介紹了解決React報錯JSX?element?type?does?not?have?any?construct?or?call?signatures，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

總覽

當(dāng)我們試圖將元素或react組件作為屬性傳遞給另一個組件，但是屬性的類型聲明錯誤時，會產(chǎn)生"JSX element type does not have any construct or call signatures"錯誤。為了解決該錯誤，可以使用React.ElementType類型。

這里有個例子來展示錯誤是如何發(fā)生的。

// App.tsx
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="James" />
    </div>
  );
};
const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;
  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};
export default App;

我們嘗試將一個React組件作為屬性傳遞給Wrapper組件，但我們將該React組件的類型聲明為JSX.Element。

React.ElementType

為了解決該錯誤，將屬性的類型聲明為React.ElementType。

// App.tsx
import React from 'react';
interface Props {
  comp: React.ElementType; // ??? type it as React.ElementType
}
const Wrapper: React.FunctionComponent<Props> = props => {
  // ??? component names must start with capital letter
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="James" />
    </div>
  );
};
const App: React.FunctionComponent = () => {
  // ??? takes a name prop
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;
  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};
export default App;

請注意，React.ElementType可以為元素期望的屬性類型傳遞一個泛型。

在這個例子中，我們必須傳遞給它一個具有字符串類型的name屬性的對象，因為那是heading組件接收的屬性。

// App.tsx
import React from 'react';
interface Props {
  // ? explicitly type props comp takes
  comp: React.ElementType<{name: string}>;
}
const Wrapper: React.FunctionComponent<Props> = props => {
  // ??? component names must start with capital letter
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="James" />
    </div>
  );
};
const App: React.FunctionComponent = () => {
  const heading = ({name}: {name: string}) => <h2>Hello {name}</h2>;
  return (
    <div>
      <Wrapper comp={heading} />
    </div>
  );
};
export default App;

現(xiàn)在我們顯式地聲明了元素在使用時所接受的comp屬性的類型。這有助于我們在向組件傳遞屬性時利用IDE的自動完成功能。

我們也可以使用React.ComponentType，但這樣我們就需要對屬性聲明類型。

// App.tsx
import React from 'react';
interface Props {
  // ??? now using React.ComponentType ???
  comp: React.ComponentType<{name: string}>;
}
const Wrapper: React.FunctionComponent<Props> = props => {
  // ??? component names must start with capital letter
  const {comp: Comp} = props;
  return (
    <div>
      <Comp name="James" />
    </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類型，因此我們需要顯示地聲明屬性的類型。

傳遞JSX元素

如果你需要將JSX元素作為屬性傳遞給組件，并且不是一個真正的組件，那么使用JSX.Element類型就是正確的。

// App.tsx
import React from 'react';
interface Props {
  // ??? using JSX.Element type
  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>;
  // ??? we are passing an actual JSX element
  // because we didn't pass it as comp={Heading}
  return (
    <div>
      <Wrapper comp={<Heading name="James" />} />
    </div>
  );
};
export default App;

我們將comp屬性的類型聲明為JSX.Element，因為我們傳遞了一個真正的JSX元素（不是組件）到Wrapper組件上。

我們傳遞了一個JSX元素，是因為我們將comp={<Heading />}作為屬性進行傳遞，而不是comp={(props) => <h2>Hello world</h2>}。

需要注意的是，在第一種情況下，我們傳遞的是一個JSX元素屬性。而在第二種情況下，我們傳遞的是一個返回JSX元素的函數(shù)（一個功能組件）。

在Wrapper組件中，我們不應(yīng)嘗試使用JSX元素作為組件。比如說，不要這么寫<Comp />，而要這么寫{Comp}。

我們沒有傳遞一個真正的組件作為屬性，我們傳遞的是一個JSX元素，所以它不應(yīng)該作為一個組件使用。

更新類型包

如果前面的建議都沒有幫助，試著通過運行以下命令來更新你的React類型的版本。

# ??? with NPM
npm install react@latest react-dom@latest
npm install --save-dev @types/react@latest @types/react-dom@latest
# ----------------------------------------------
# ??? with YARN
yarn add react@latest react-dom@latest
yarn add @types/react@latest @types/react-dom@latest --dev

原文鏈接：bobbyhadz.com/blog/react-…

以上就是解決React報錯JSX element type does not have any construct or call signatures的詳細內(nèi)容，更多關(guān)于React JSX element報錯解決的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: