Question

我试图在同一个捆绑包中安装多个ReactJS组件，但只希望在特定页面上加载特定组件。

我拥有的组件： 1.搜索 - 包括搜索栏，分页搜索结果和过滤器 2.配置文件表格（向导格式的多页）

显然，我希望搜索组件仅包含在配置文件页面上的搜索页面和配置文件组件中。出于性能和优化的原因，我希望所有内容都在同一个包中（使用grunt和browserify）。我在我的一个文件中有如下所示的渲染：

var React = require('react');
var ReactDOM = require('react-dom');

var Search = require('./Search');
var Profile = require('./Profile');

ReactDOM.render(
  React.createElement(Profile, null),
  document.getElementById('reactWrapperProfile')
);
ReactDOM.render(
  React.createElement(Search, null),
  document.getElementById('reactWrapperSearch')
);

然后我意识到必须在多个页面上创建reactWrapperProfile和reactWrapperSearch，否则它会抛出：

Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

渲染所有组件并使用css隐藏它们并不理想。对于这样的场景，最佳实践或解决方案是什么？

感谢。

Answer 1

如果您想拥有一个包含多个网页的网站，我建议您react-router。您可以在存储库中找到多个示例以显示其工作原理。您的索引（包索引）文件将看起来像这样：

// ...
ReactDOM.render((
<Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="search" component={Search}/>
      <Route path="profile" component={Profile}/>
    </Route>
  </Router>
), document.body);

如果您尝试谷歌，您还可以找到很多教程，以及＃34;反应路由器教程＆＃34;。

希望这会有所帮助。

祝你好运

ReactJS组件位于不同页面的同一个包中

1 个答案: