动态加载反应组件

Question

我试图学习反应，我对应用程序有所了解。基本上，我想在主应用程序中加载辅助应用程序的反应组件。这是一个例子：

1. 主服务器 - 主应用
2. 服务器1 - 应用1
3. 服务器2 - 应用程序2

如果我进入主应用程序，我有2个选项：加载App1并加载App2。如果我点击App1，主应用程序将请求服务器1获取应用程序1的js代码。它将加载它，然后添加App 1组件。

我已经设法做了这样的事情。我使用create-react-app来创建主应用程序和App1。从主应用程序我执行App 1 js文件的ajax请求并使用eval加载它。它将自动绑定到预定义的元素id。

我的目标是能够将一些参数传递给App 1组件，例如，元素id在哪里加载它。

这样的事情可能吗？

Answer 1

您可以使用道具将参数从一个组件传递到另一个组件，例如

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

它将呈现： Hello Sara