如何在tsx文件上使用条带库遇到错误

问题描述

我有一个正在执行反应的项目，但是文件不是.js而是.tsx，我正在尝试使用Stripe库，但一直出错。

我尝试了几种不同的库来帮助设置条带，但是我一直陷在这个错误中。

请帮助或指导我正确的库，以帮助我设置数据条。

我的代码是

import ReactDOM from "react-dom";
import StripeCheckout from 'react-stripe-checkout';
import axios from "axios";


function handleToken(token,addresses) {
    console.log(token,addresses);
  }

export default function Webinar() {

  return (
    <div className="container">

       <StripeCheckout stripeKey = "mykey"
            token={handleToken}
            name="Tesla Roadster"
            billingAddress
            shippingAddress
            />

    </div>
  );
}

解决方法

问题是您的打字稿存储库现已启用strict模式，这会强制您指定键入内容。如果您希望保持静音，则只需将其切换到false中的tsconfig.json：

{
  "compilerOptions": {
    "strict": false,// ...
  }
}

将函数handleToken更改为具有与组件prop相同类型的变量，如下所示：

const handleToken: StripeCheckout['props']['token'] = (token) => {
  // You can receive hint from token type here
}