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

piv4azn7  于 2022-12-05  发布在  TypeScript
关注(0)|答案(4)|浏览(170)

我正在按照Stripe文档在链接处嵌入定价表,但遇到此错误:“属性'stripe-pricing-table'在类型'JSX. IntrinsicElements'上不存在”。
下面是我的代码:
我会很感激任何帮助。

f8rj6qna

f8rj6qna1#

我认为这更像是一个Typescript问题,您可能必须沿着以下语句声明stripe-pricing-table的类型

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

jjhzyzn02#

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

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

ct3nt3jp3#

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

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

bq9c1y664#

最后在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开始

相关问题