嵌入Stripe定价表报错：Property 'stripe-pricing-table'不存在于JSX.IntrinsicElements

这个错误是因为TypeScript默认不识别stripe-pricing-table这类自定义Web组件的类型，下面是两种可行的解决方法：

方法1：扩展TypeScript类型定义（推荐长期使用） #

在项目里创建一个类型声明文件（比如src/stripe-pricing-table.d.ts），通过以下代码告诉TypeScript这个自定义元素的合法属性：

declare namespace JSX {
  interface IntrinsicElements {
    'stripe-pricing-table': {
      'pricing-table-id': string;
      'publishable-key': string;
      // 可选：如果需要用到其他属性，比如多语言设置，可在此添加
      locale?: string;
    };
  }
}

之后检查tsconfig.json的include数组，确保这个声明文件被TypeScript识别：

{
  "include": ["src/**/*", "src/stripe-pricing-table.d.ts"]
}

方法2：临时类型断言（仅用于快速测试） #

如果只是临时验证功能，可以用as any绕过类型检查，但不建议长期使用这种方式：

import React from 'react';

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

必要前置步骤 #

别忘了在项目的入口HTML文件（比如public/index.html）中加载Stripe定价表的脚本，否则组件无法正常渲染：

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

内容的提问来源于stack exchange，提问作者DeonV