类型 \'JSX.IntrinsicElements\' 上不存在属性 \'stripe-pricing-table\'答案

【问题标题】：Property 'stripe-pricing-table' does not exist on type 'JSX.IntrinsicElements'类型 \'JSX.IntrinsicElements\' 上不存在属性 \'stripe-pricing-table\'
【发布时间】：2022-10-14 04:31:17
【问题描述】：

我正在关注在link 嵌入定价表的 Stripe 文档，但遇到了这个错误：“类型 'JSX.IntrinsicElements' 上不存在属性 'stripe-pricing-table'”。

这是我的代码：

import React from 'react';

export default function PricingTable() {
  return (
    <stripe-pricing-table
      pricing-table-id="prctbl_xxxxx"
      publishable-key="pk_test_xxxxx"
    ></stripe-pricing-table>
  );
}

我很感激这方面的任何帮助。

【问题讨论】：

标签： javascript reactjs typescript stripe-payments

【解决方案1】：

我认为这更像是一个 Typescript 问题，您可能必须按照以下方式为 stripe-pricing-table 声明一个类型

declare global {
  namespace JSX {
    interface IntrinsicElements {
      stripe-pricing-table: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
    }
  }
}

【讨论】：

如何使用此代码？
@ZulqarnainJalil 您需要执行以下操作（我修改了 e 代码中的属性）：声明 global { namespace JSX { interface IntrinsicElements { ['stripe-pricing-table']: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTML元素>; } } }

【解决方案2】：

您是否在 index.html 中导入了pricing-table.js 脚本？

<script async src="https://js.stripe.com/v3/pricing-table.js"></script>

【讨论】：

【解决方案3】：

我采用这种方法来注入嵌入代码：

function stripeEmbed() {
  return {
    __html: `<script async src="https://js.stripe.com/v3/pricing-table.js"></script>
    <stripe-pricing-table pricing-table-id="prctbl_xxxx"
    publishable-key="pk_test_xxxx">
    </stripe-pricing-table>`
  };
}

export function PricingTable() {
  return <div dangerouslySetInnerHTML={stripeEmbed()} />;
}

【讨论】：