如何管理 React Router Component 的布局

Question

全部：

我是 React Router 的新手，当我关注 this great tutorial 时，有一件事我找不到，那就是：

如何调整布局来决定window中的哪个区域可以正确渲染，那个教程中讲的组件结构更像是内容的逻辑结构但没有太多关联UI layout/style.

谁能告诉我一个简单的例子，说明如何将样式应用到相应的组件以确保它们在正确的位置？

谢谢

Answer 1

您的组件应该知道如何执行此操作。使用父组件来控制其子组件的放置。例如，我用于我的应用程序的常见模式类似于：

var Nav = React.createClass({
  render () {
    return (
      {'I am the Nav bar'}
    );
  }
});

var RightContent = React.createClass({
  render () {
    return (
      {'I am Right Content'}
    );
  }
});

var LeftContent = React.createClass({
  render () {
    return (
      {'I am Left Content'}
    );
  }
});

import {Col, Row} from 'react-bootstrap';
var Content = React.createClass({
  render () {
    return (
      <Row>
        <Col md={6}>
          <LeftContent />
        </Col>
        <Col md={6}>
          <RightContent />
        </Col>
      </Row>
    );
  }
});

var App = React.createClass({
  render () {
    return (
      <div>
        <Nav />
        {this.props.children}
      </div>
    );
  }
});

您可以在这里看到，每个组件都完全负责放置其子组件。通常，最好让父组件进行布局，然后让子组件实际包含内容。

在每个组件样式方面，您可以直接在组件层应用 CSS（对此问题的讨论超出了本问题的范围），或者您可以继续使用常规的全局 CSS 样式表 - 只需将每个组件视为一个 div，可能在页面上，也可能不在页面上。

如何管理 React Router Component 的布局

How to manage the layout of React Router Component

reactjs

react-router