<p>我需要创建一个自定义组件，只是为了获取卡片信息并将其存储在Stripe上，以便以后可以对其进行收费。</p> <pre class="brush:php;toolbar:false;">v3:1 Uncaught (in promise) IntegrationError: 我们无法从指定的元素中检索数据。 请确保您要使用的元素仍然已挂载。 at ni (v3:1:319630) at e._handleMessage (v3:1:324970) at e._handleMessage (v3:1:146061) at v3:1:322539</pre> <p>出现了这个错误，我已经检查了组件是否已挂载，但是一直以来都是挂载的，因为这是Stripe的工作方式，所有的Stripe组件都在不同的，为我们的应用程序带来了额外的负载，但这是另一个话题。</p> <p>我需要摆脱这个错误。</p> <p>我有一个使用stripe.checkout.sessions.create的路由，但它会将用户重定向到另一个标签页，这不是我想要的行为，我更喜欢在同一个应用程序中弹出窗口并在那里获取卡片数据并存储。</p> <p>在index中传递stripe引用（用于全局访问）</p> <pre class="brush:php;toolbar:false;">import {Elements} from &quot;@stripe/react-stripe-js&quot;; import {loadStripe} from &quot;@stripe/stripe-js&quot;; const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY); ...others const root = ReactDOM.createRoot(document.getElementById('root')); root.render( &lt;React.StrictMode&gt; &lt;BrowserRouter&gt; &lt;Provider store={store}&gt; &lt;Elements stripe={stripePromise}&gt; &lt;ThemeProvider&gt; &lt;App/&gt; &lt;/ThemeProvider&gt; &lt;/Elements&gt; &lt;/Provider&gt; &lt;/BrowserRouter&gt; &lt;/React.StrictMode&gt; );</pre> <p>Stripe CardInput Wrapper（就像文档中的一样） 注意：我在嵌套组件之前在一个空项目中尝试了这段代码，可以完美运行。</p> <pre class="brush:php;toolbar:false;">import React, {useState} from 'react'; import {CardElement} from '@stripe/react-stripe-js'; import {styled} from &quot;@mui/material/styles&quot;; import {Box, Stack, Typography} from &quot;@mui/material&quot;; import EzLoadingBtn from &quot;../../ezComponents/EzLoadingBtn/EzLoadingBtn&quot;; const CARD_ELEMENT_OPTIONS = { style: { base: { 'color': '#32325d', 'fontFamily': '&quot;Helvetica Neue&quot;, Helvetica, sans-serif', 'fontSmoothing': 'antialiased', 'fontSize': '16px', '::placeholder': { color: '#aab7c4', }, }, invalid: { color: '#fa755a', iconColor: '#fa755a', }, }, }; const RootStyle = styled(Stack)(({theme}) =&gt; ({ width: '400px', padding: '50px 30px 30px 30px' })) export default function CardInput({onSubmit}) { const [loading, setLoading] = useState(false); return ( &lt;RootStyle&gt; &lt;Box component='form' onSubmit={onSubmit}&gt; &lt;Stack flexDirection='row' justifyContent='space-between' sx={{marginBottom: '25px'}}&gt; &lt;Typography variant='span'&gt;Card&lt;/Typography&gt; &lt;/Stack&gt; &lt;CardElement options={CARD_ELEMENT_OPTIONS}/&gt; &lt;EzLoadingBtn sx={{marginTop: '25px'}} color=&quot;inherit&quot; size='large' type='submit' variant='outlined' loading={loading} &gt; Save Card &lt;/EzLoadingBtn&gt; &lt;/Box&gt; &lt;/RootStyle&gt; ); }</pre></p>

<Elements stripe={stripePromise}>
   <ThemeProvider>
      <App/>
   </ThemeProvider>
</Elements>

/*父组件*/
<Elements stripe={stripePromise} options={options}>
    <CardInput/>
</Elements>

/*子组件*/
export default function CardInput() {
    return (
        <div>
            <PaymentElement/>
        </div>
    );
}