JSX 元素类型“SubscribeCard”没有任何构造或调用签名答案

【问题标题】：JSX element type 'SubscribeCard' does not have any construct or call signaturesJSX 元素类型“SubscribeCard”没有任何构造或调用签名
【发布时间】：2021-09-21 09:57:17
【问题描述】：

我想在 react.js 中使用 react-subscribe-card 模块进行邮件订阅。

这是我在 popup.tsx 中的代码。

import React from "react";
import SubscribeCard from "react-subscribe-card";

const mailchimpURL = `[Your Mailchimp subscription URL]`;

const outerCardStyle = `
      padding: 0;
      box-shadow: 0px 5px 35px 0px rgba(50, 50, 93, 0.17);
    `;
const subContainerStyle = `
      box-shadow: 0 2px 5px -1px rgba(50,50,93,.25), 0 1px 3px -1px rgba(0,0,0,.3);
      align-items: center;
    `;
const subInputStyle = `
      border-width: 0;
      margin: 0;
    `;
const subButtonStyle = `
      border-radius: 0;
      flex-grow: 1;
      background-color: #fdfdfd;
      color: #000000;
    `;

const App = () => (
  <div>
    <SubscribeCard
      mailchimpURL={mailchimpURL}
      outerCardStyle={outerCardStyle}
      subContainerStyle={subContainerStyle}
      subInputStyle={subInputStyle}
      subButtonStyle={subButtonStyle}
    />
  </div>
);

export default App;

但我收到此错误

JSX 元素类型“SubscribeCard”没有任何构造或调用签名。

请帮我解决。谢谢

【问题讨论】：

所以你的 popup.tsx 文件包含 App 组件？你有另一个名为 App.js 或 App.tsx 的文件吗？
为我工作：codesandbox.io/s/brave-jepsen-0n9ul?file=/src/App.js。您使用的是最新版本的react-subscribe-card 吗？或者它的安装有问题。
感谢您的回复。但我的文件是 tsx 文件。如果是 js 文件，它运行良好。但如果是 tsx 文件，它就不起作用并出现上述错误

标签： reactjs typescript

【解决方案1】：

声明file有问题

您可能已经注意到，SubscribeCard 没有类型

您可以创建 PR 或仅使用此解决方法：

import React from "react";
import { SubscribeCard, Props } from "react-subscribe-card";

declare module "react-subscribe-card" {
  type ExtendedProps = {
    mailchimpURL: string;
    outerCardStyle: string;
    subContainerStyle: string;
    subInputStyle: string;
    subButtonStyle: string;
  };
  var SubscribeCard: React.ComponentClass<Props & ExtendedProps>;
}


const mailchimpURL = `[Your Mailchimp subscription URL]`;

const outerCardStyle = `
      padding: 0;
      box-shadow: 0px 5px 35px 0px rgba(50, 50, 93, 0.17);
    `;
const subContainerStyle = `
      box-shadow: 0 2px 5px -1px rgba(50,50,93,.25), 0 1px 3px -1px rgba(0,0,0,.3);
      align-items: center;
    `;
const subInputStyle = `
      border-width: 0;
      margin: 0;
    `;
const subButtonStyle = `
      border-radius: 0;
      flex-grow: 1;
      background-color: #fdfdfd;
      color: #000000;
    `;

const App = () => (
  <div>
    <SubscribeCard
      mailchimpURL={mailchimpURL}
      outerCardStyle={outerCardStyle}
      subContainerStyle={subContainerStyle}
      subInputStyle={subInputStyle}
      subButtonStyle={subButtonStyle}
    />
  </div>
);

请记住，您没有提供所有必需的道具。

【讨论】：