Question

所以我有一个用php laravel构建的web应用程序，我们将它用于路由和数据库。现在我想在某些页面上使用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">

那么如何让组件显示在特定页面上呢？

Answer 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);
}

Answer 2

我建议您查看React Habitat library。

由于你不想要React中的所有内容，我认为这是最适合你问题的框架。有了这个，您只需注册组件并在需要的DOM中呈现它们。

实施例

注册组件：

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

然后它们可以在您的DOM中使用：

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

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

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

我会谨慎使用路由器，因为你的应用程序可能会破坏，如果网址被管理并改变其他位置（例如在你的PHP代码中）。

Answer 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>

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

3 个答案: