无法将 JS 文件导入 TSX 文件

Question

大家好，我是 React 的新手。 我正在使用 typescript 构建我的反应应用程序，并想添加 Stripe 来进行在线支付。 但是我找不到关于stripe的typescript教程，所以我尝试使用javascript来写stripe部分。 但是当我触发条纹时。 出现以下错误：

参考 stackOverFlow 上的其他解决方案，我使用了不同的导入方法，例如

import stripe from './stripe';
import * as stripe from './stripe';

但他们都不能解决我的问题。

我的代码有什么问题？

以下是代码： 对于 Stripe 文件：

import React from 'react'
import { Element } from "@stripe/react-stripe-js"
import { loadStripe } from '@stripe/stripe-js'
import "./Stripe.css"
const PaymentForm = require ('./PaymentForm.js')


const PUBLIC_KEY = "pk_test_XXXXXXX"

const stripeTestPromise = loadStripe(PUBLIC_KEY)

export default function Stripe() {
    return (
        <Element stripe={stripeTestPromise}>
            <PaymentForm />
        </Element>
    )
}

对于 paymentFrom 文件：

import React, { useState } from 'react'
import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js"
import * as axios from 'axios'
import "./Stripe.css"

const CARD_OPTIONS = {
    iconStyle: "solid",
    style: {
        base: {
            iconColor: "#c4f0ff",
            color:"fff",
            fontWeight: 500,
            fontSize: "16px",
            fontSmoothing:"antialiased",
        },
        invaild: {
            iconColor: "#ffc7ee",
            color: "ffc7ee"
        }
    }
}

export default function PaymentForm() {
    const [success, setSuccess] = useState(false)
    const stripe = useStripe()
    const elements = useElements()

    const handleSubmit = async (e) => {
        e.preventDefault()
        const { error, paymentMethod } = await stripe.createPaymentMethod({
            type: "card",
            card: elements.getElement(CardElement)
        })


        if (!error) {
            try {
                const { id } = paymentMethod
                const response = await axios.post('http://localhost:8080/checkout', {
                    amount: 500,
                    id
                })

                if (response.data.success) {
                    console.log('Successful payment')
                    setSuccess(true)
                }
            } catch (error) {
                console.log('Error', error)
            }
        } else {
            console.log(error.message)
        }
    }


    return (
        <div>
            {!success ?
                <form onSubmit={handleSubmit}>
                    <fieldset className="FormGroup">
                        <div className="FormRow">
                            <CardElement options={CARD_OPTIONS} />
                        </div>
                    </fieldset>
                    <button>Pay</button>
                </form >
                :
                <div>
                    <h2>You just bought a sweet saptula</h2>
                </div>
            }
        </div>
    )
}

Answer 1

我想发表评论，但我没有这样做的声誉，所以我将提交一个答案：

如果您尝试按照文档插入元素提供程序，则需要以这种方式插入提供程序：

import {Elements} from '@stripe/react-stripe-js';

你正在像这样导入这个

import {Element} from '@stripe/react-stripe-js';

您要导入的元素可能是接口或另一个 object 而不是您想要的提供程序