2

下面实际上可以渲染 App 组件，加上路由指定的一个组件，this.props.children它将在App.js. 但它是 react-router v4 的首选或正确方法吗？

方法一

// in index.js

ReactDOM.render(
  (
    <Provider store={createStoreWithMiddleware(reducers)}>
      <App>
        <Router>
          <div>
            <Route exact={true} path="/" component={PostsIndex} />
            <Route path="/posts/:id" component={PostsShow} />
          </div>
        </Router>
      </App>
    </Provider>
  ),
  document.querySelector('#root')
);

// in App.js

export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to this awesome App</h1>
          {this.props.children}
      </div>
    );
  }
}

方法二

// in index.js  (App.js stays the same as above)

ReactDOM.render(
  (
    <Provider store={createStoreWithMiddleware(reducers)}>
      <Router>
        <App>
          <Route exact={true} path="/" component={PostsIndex} />
          <Route path="/posts/:id" component={PostsShow} />
        </App>
      </Router>
    </Provider>
  ),
  document.querySelector('#root')
);
4

1 回答 1

0

哪个是首选取决于您要实现的目标。我倾向于使用您的方法 2，因为它允许您稍后在组件中添加路由App组件：

// in App.js
export default class App extends Component {
  render() {
    return (
      <div>
        <h1>Welcome to this awesome App</h1>
        <Link to="/">Home</Link>
        {this.props.children}
      </div>
    );
  }
}

使用您的Method 1，App组件位于组件之外，Router这将不允许您在组件内使用 React RouterApp组件。通常，应用程序中需要路由组件的任何地方都必须是该组件的子Router组件。在某些情况下，您的App组件不应该使用路由组件，但如果这是我的目标，我也会通过添加一些关于为什么App是 outside的注释来明确这一点Router。

将 React Router v4 视为普通的 React 组件（因为它们是）可能会有所帮助，然后重新阅读 React Docs about Composition vs Inheritance and Children in JSX，其中props.children详细介绍了它们的使用。总而言之，props.children它是 React 工作方式的核心部分，也是实现组合的推荐方式（而不是使用继承），因此没有理由避免将它与 React Router V4 一起使用，其中首页声明“组件是核心React 强大的声明式编程模型。React Router 是导航组件的集合，它们以声明方式与您的应用程序组合。强调我的。

于 2017-04-18T23:36:00.550 回答