Add an external child in React - reactjs

Question

I need to add another react component that's located in an external CDN as a child in my react component. Something like this:
var RemoteComponent = require('//cdn.com/some-remote-component');
var MyComponent = React.createClass({
render: function() {
return (
<div>
<RemoteComponent />
</div>
);
}
});
module.exports = MyComponent;
Any ideas on how could I do that?

Answer 1

Assuming the component registers to a global you could use a script loader such as script.js. Note that it is an asynchronous process so that will lead to some complexity. You may need to run the component through React.createFactory before plugging it in dynamically.
I expect you'll need to do something like this (not tested):
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>
);
}
}
You may need to tweak the code to your liking but I hope it illustrates the basic idea.

Answer 2

You can also build your own function to load remote react components without using requirejs or scriptjs. It can be very straightforward as follows (I was inspired by the solution 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;
});
}