这是react 的入门示例，在示例中，以下代码片段位于单独的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>在这些页面中重用？
把 ReactDOM.render 放在 React 的什么位置
IT技术
reactjs
2021-05-27 14:01:46
3个回答
你有一个有效的问题。您可以从 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 应用程序中使用过这种方法。基本上用硬编码的 id 参数绑定你的 React 应用程序是不合逻辑的。
凯末尔的回答很好，我只是想分享我的解决方案。
这些天window，我将init(id, props)在执行初始安装的顶级组件上公开一个静态方法，而不是直接挂钩或类似方法：
export default class App extends Component {
...
static init(id, props) {
return ReactDOM.render(
<App {...props} />,
document.getElementById(id)
);
}
...
}
然后在我的托管页面中：
<div id="container"></div>
<script>
App.init('container', { ... });
</script>
该#example元素只是应用程序的安装点。查看教程，您将在其中学习如何组合基本组件。稍后您可以使用路由器在页面/视图之间进行更改。