在React中放置ReactDOM.render的位置

Question

这是反应的入门示例,在示例中,波纹管代码片段位于单独的main.js文件中:

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

如果页面不包含id:'example',例如home.html(只有id:example1),index.html(只有id:example2),那么如何<h1>Hello, world!</h1>在这些页面中重用？

Answer 1

你有一个有效的问题.您可以从main.js文件中抽象出硬编码的#id部分.而不是将main.js视为自引导React应用程序,只需公开它的参数化版本.

这是新的main.js

window.renderApp = function(id){
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById(id)
  );
};

在您的推测index.html文件中

<div id="newID"></div>
<script src="main.js"></script>
<script>
  renderApp('newID');
</script>

我已经看过这种方法,我自己在几个生产React应用程序中使用了它.基本上,将React应用程序与硬编码的id参数绑定是不合逻辑的.