Question

以下是反应的Getting Started示例，在示例中，波纹管代码片段位于单独的 main.js 文件中：

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

如果有些网页不包含ID：＆＃39;示例＆＃39;，例如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参数绑定是不合逻辑的。

Answer 2

凯末尔的答案很好，我只想分享我的解决方案。

这些天而不是直接挂钩到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>

Answer 3

#example元素只是应用的安装点。查看tutorial，了解如何撰写基本组件。然后，您可以使用路由器在页面/视图之间进行更改。

何处将ReactDOM.render放入React

3 个答案: