类型“JSX.IntrinsicElements”上不存在属性“stripe-pricing-table”

Question

我按照 Stripe 文档在 link 处嵌入定价表，但遇到了此错误：“类型‘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>
  );
}

如果有任何帮助，我将不胜感激。

Answer 1

我认为这更多是一个 Typescript 问题，您可能必须按照

 的方式声明 

stripe-pricing-table

的类型

import * as React from 'react'

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

Answer 2

有点晚了，但如果你使用 React 和 Typescript，我就是这样做的。

import React, { useEffect } from "react";

const StripePricingTable = () => {
    useEffect(() => {
        const script = document.createElement("script");
        script.src = "https://js.stripe.com/v3/pricing-table.js";
        script.async = true;
        document.body.appendChild(script);

        return () => {
            document.body.removeChild(script);
        };
    }, []);

    return React.createElement("stripe-pricing-table", {
        "pricing-table-id": {PRICING TABLE ID GOES HERE},
        "publishable-key": {PUBLISHABLE KEY GOES HERE},
    });
};

export default StripePricingTable;

Answer 3

您是否在index.html中导入了

pricing-table.js

脚本？

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

Answer 4

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

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()} />;
}

Answer 5

最终将其与 NextJS 一起使用

  const NextStripePricingTable = ({ pricingTableId, publishableKey, clientReferenceId }) => {
    if (!pricingTableId || !publishableKey) return null
    return (
      <>
        <Script async strategy="lazyOnload" src="https://js.stripe.com/v3/pricing-table.js" />
        <stripe-pricing-table
          pricing-table-id={pricingTableId}
          publishable-key={publishableKey}
          client-reference-id={clientReferenceId}
        />
      </>
    )
  }

来自 https://zenn.dev/hideokamoto/scraps/c588966247b1f9

Answer 6

添加此代码片段对我来说适用于react@19：

declare module "react" {
    namespace JSX {
        interface IntrinsicElements {
            'stripe-buy-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
        }
    }
}