向 React 应用程序添加一些服务器端动态客户端 javascript答案

【问题标题】：Adding a bit of server-side dynamic client javascript to a react app向 React 应用程序添加一些服务器端动态客户端 javascript
【发布时间】：2015-07-10 00:11:04
【问题描述】：

我正在研究Shopify Embedded App SDK 并且有一部分您必须从服务器端变量中删除一些javascript。我正在使用react engine、react-router 和express.js。

<head>
  <script src="https://cdn.shopify.com/s/assets/external/app.js"></script>
  <script type="text/javascript">
    ShopifyApp.init({
      apiKey: 'YOUR_APP_API_KEY',
      shopOrigin: 'https://CURRENT_LOGGED_IN_SHOP.myshopify.com'
    });
  </script>
</head>

有一种方法可以提供red.render(req.url, data) 数据，但是我不确定我应该在组件中用它做什么。有没有办法从组件中访问和更改全局 ShopifyApp 变量？

【问题讨论】：

标签： javascript reactjs shopify

【解决方案1】：

我将 shopify 代码添加到 App 组件的 componentDidMount （react-routes 中最顶层的组件）。

var Layout = require('./layout.jsx');
var React = require('react');
var Router = require('react-router');

module.exports = React.createClass({
  componentDidMount: function(){
    if(this.props.shopify){
      ShopifyApp.init({
        apiKey: this.props.shopify.apiKey,
        shopOrigin: this.props.shopify.shopOrigin
      })
    }
  },
  render: function render() {
    return (
      <Layout {...this.props}>
        <Router.RouteHandler {...this.props}/>
      </Layout>
    );
  }
});

【讨论】：