javascript - 如何在同构reactjs应用程序中加载第三方库?

标签 javascript reactjs redux stripe-payments mern

我正在尝试使用 Stripe 库,特别是 Stripe 元素,以便我可以设置用于付款处理的自定义表单。我在 server.js 文件中使用 meern-starter 我有以下代码。您可以看到在底部我添加了一个脚本标签来导入 stripe。但是,在我的客户端文件夹中,我有一个组件正在尝试使用 strip ,但它似乎无法访问它。我的猜测是还不知道它存在,但我怎样才能规避这个问题呢?我看过一个专门处理加载脚本的 react 组件,但它似乎不是一个很好的解决方案。我只是想知道是否还有其他人知道更好的方法。我知道我可以使用回调并在加载完成时进行调度和操作(使用 REDUX),然后才允许执行我的 strip 代码,但这似乎又很烦人。任何有关此问题的见解将不胜感激。

return `
<!doctype html>
<html>
  <head>
    ${head.base.toString()}
    ${head.title.toString()}
    ${head.meta.toString()}
    ${head.link.toString()}
    ${head.script.toString()}

    ${process.env.NODE_ENV === 'production' ? `<link rel='stylesheet' href='${assetsManifest['/app.css']}' />` : ''}
    <link href='https://fonts.googleapis.com/css?family=Lato:400,300,700' rel='stylesheet' type='text/css'/>
    <link rel="shortcut icon" href="http://res.cloudinary.com/hashnode/image/upload/v1455629445/static_imgs/mern/mern-favicon-circle-fill.png" type="image/png" />
  </head>
  <body>
    <div id="root">${html}</div>
    <script>
      window.__INITIAL_STATE__ = ${JSON.stringify(initialState)};
      ${process.env.NODE_ENV === 'production' ?
      `//<![CDATA[
      window.webpackManifest = ${JSON.stringify(chunkManifest)};
      //]]>` : ''}
    </script>
    <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/vendor.js'] : '/vendor.js'}'></script>
    <script src='${process.env.NODE_ENV === 'production' ? assetsManifest['/app.js'] : '/app.js'}'></script>
    <script src='https://js.stripe.com/v3/'></script>
  </body>
</html>`;

最佳答案

您的问题是您的应用程序脚本在 stripe.js 之前运行已加载。

输入<script src='https://js.stripe.com/v3/'></script>在头部,或者至少在您的应用程序之前(在本例中为 app.js)。

关于javascript - 如何在同构reactjs应用程序中加载第三方库?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45091687/

相关文章:

php - 为动态添加的内容注册事件处理程序

javascript - 我如何对对象进行冒泡排序?

reactjs - 如何输入自定义的pilet api?

javascript - 如何在 onClick 函数上更改存储在 Redux 上的 bool 值?

javascript - Easyautocomplete + Vue.js - 如何通过点击更新存储的变量?

javascript - promise 后的返回值

javascript - 向 vue-select 添加新标签

reactjs - 在react-table的子组件中设置状态会关闭组件并使用ReactJS重置所有状态

javascript - React Redux 调度有效负载到达带有数据的情况,但不保存它

reactjs - Redux Store 仅订阅特定事件?商店.订阅()