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

Question

我正在调查 Shopify Embedded App SDK and theres a part where you have to drop a bit of javascript from server-side variables. I'm using react engine, react-router and 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 变量？

Answer 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>
    );
  }
});

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

Adding a bit of server-side dynamic client javascript to a react app

javascript

shopify

reactjs