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

Question

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

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

请帮助或指导我更正帮助我设置条带的库。

我的代码是

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

Answer 1

问题是您的 Typescript 存储库现在启用了 strict 模式，这会强制您指定类型。如果你想让它保持沉默，你可以简单地在tsconfig.json中切换到false：

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

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

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