如何正确拥有多个反应组件？答案

【问题标题】：How to properly have multiple react components?如何正确拥有多个反应组件？
【发布时间】：2016-06-03 18:20:55
【问题描述】：

所以我有一个用 php laravel 构建的网络应用程序，我们将它用于路由和数据库。现在我想在某些页面上使用 react 组件，我不想在 react 中构建完整的站点。但是我不断收到错误，因为 webpack 将所有内容编译到一个文件中。

localhost/home 这很好用

<div class="app">

</div>

但是当我去的时候

localhost/关于这个错误出现

final.min.js:1 Uncaught Invariant Violation: _registerComponent(...): 目标容器不是 DOM 元素。

//this don't have <div class="app">

那么我怎样才能让组件显示在特定页面上呢？

【问题讨论】：

您可以构建组件以分隔文件stackoverflow.com/questions/30818236/…，然后包含在您想要的页面上

标签： reactjs webpack

【解决方案1】：

我建议给你的 div 一个 id 来识别它。

<div id="app">
</div>

然后用 JavaScript 检查当前页面上是否存在这个 div。仅当此 div 存在时才呈现您的反应组件。

var app = document.getElementById('app');
if (typeof app !== 'undefined') { // or just if (app) {
    ReactDOM.render(yourReactElement, app);
}

【讨论】：

应该是getElementById('app')?

【解决方案2】：

我建议看看React Habitat library。

由于您不想要 React 中的所有内容，我认为这是最适合您的问题的框架。有了这个，你可以注册组件并在需要的地方渲染它们。

例子

注册组件：

container.register('MyComponent', MyComponent);
container.register('MySecondComponent', MySecondComponent);

然后它们在您的 DOM 中可用，如下所示：

<div data-component="MyComponent"></div>

<div data-component="MySecondComponent"></div>

以上内容将自动替换为您的 react 组件。

我会谨慎使用路由器，因为如果网址在其他位置（例如在您的 php 代码中）进行管理和更改，您的应用程序可能会中断。

【讨论】：

【解决方案3】：

我使用 https://github.com/reactjs/react-router 。

<Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
      <Route path="users" component={Users}>
        <Route path="/user/:userId" component={User}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>

【讨论】：