Question

我需要在反应组件中添加另一个位于外部CDN中的反应组件作为子项。像这样：

var RemoteComponent = require('//cdn.com/some-remote-component');
var MyComponent = React.createClass({
  render: function() {
    return (
      <div>
        <RemoteComponent />
      </div>
    );
  }
});
module.exports = MyComponent;

关于我怎么能这样做的任何想法？

Answer 1

假设组件注册到全局，您可以使用脚本加载器，例如script.js。请注意，这是一个异步过程，因此会导致一些复杂性。在动态插入组件之前，您可能需要通过React.createFactory运行该组件。

我希望你需要做这样的事情（未经测试）：

export default MyComponent {
  constructor(props) {
    super(props);

    this.state = {
      component: null
    };

    $script('cdn url goes here', () => {
      // expects to find a global named `RemoteComponent` now
      this.setState({
        component: React.createFactory(RemoteComponent);
      })
    });
  }
  render() {
    const component = this.state.component;    

    return (
      <div>
        {component}
      </div>
    );
  }
}

您可能需要根据自己的喜好调整代码，但我希望它能说明基本的想法。

Answer 2

您还可以构建自己的函数来加载远程反应组件，而无需使用requirejs或scriptjs。它可以非常简单如下（我的灵感来自解决方案here）

import React from 'react';

export function loadRemoteComponent(url) {
  return fetch(url)
    .then(response => response.text())
    .then(text => {
      // Define exports and require method for eval(text)
      const exports = {};
      function require(name) {
        if (name === 'react') {
          return React;
        }
        throw new Error('Does not support modules other than "react"');
      }
      eval(text);
      return exports.__esModule ? exports.default : exports;
    });
}

在React中添加外部子项

2 个答案: