Блог

Главная - Вопросы по программированию - Тип элемента JSX «Карточка подписки» не имеет никаких сигнатур конструкции или вызова

Тип элемента JSX «Карточка подписки» не имеет никаких сигнатур конструкции или вызова

#reactjs #typescript

Вопрос:

Я хочу использовать модуль react-subscribe-card для подписки на электронную почту в react.js.

это мой код во всплывающем окне.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 «Карточка подписки» не имеет никаких сигнатур конструкции или вызова.

пожалуйста, помогите мне исправить. Спасибо

Комментарии:

1. Итак, ваш файл popup.tsx содержит компонент приложения ? у вас есть еще один файл под названием App.js или App.tsx ?

2. Работает для меня: codesandbox.io/s/brave-jepsen-0n9ul?file=/src/App.js . Вы используете последнюю версию react-subscribe-card ? Или, может быть, возникла проблема с его установкой.

3. спасибо за ваш ответ. но мой файл-файл tsx. если файл js, он хорошо работает. но если файл tsx, он не работает и появляется ошибка выше

Ответ №1:

В файле декларации есть проблема

Как вы могли заметить, для 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 amp; 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>
);

Пожалуйста, имейте в виду, что вы не предоставили весь необходимый реквизит.

Метки: