如何在isomorphic reactjs应用程序中加载第三方库?

时间:2017-07-13 22:07:08

标签: javascript reactjs redux stripe-payments mern

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

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>`;

1 个答案:

答案 0 :(得分:1)

您的问题是您的应用程序脚本在加载var ORIGINAL_FLAG_OBJECT = { logical1Flag: false, operator1Flag: false, resourceLeftFlag: false, resource1Flag: false, resourceRightFlag: false, }; var flagsObj = _.clone(ORIGINAL_FLAG_OBJECT); function activateFlag(flag) { return _(flagsObj) .assign(ORIGINAL_FLAG_OBJECT) .set(flag, true) .value(); } console.log(activateFlag('resourceRightFlag')); console.log(activateFlag('resource1Flag')); console.log(activateFlag('resourceLeftFlag')); console.log(activateFlag('operator1Flag')); console.log(activateFlag('logical1Flag'));之前正在运行。

.as-console-wrapper { min-height: 100%; top: 0; }放在头部,或者至少放在你的应用之前(在这种情况下为<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>)。