Question

所有

我对React Router很陌生，当我关注this great tutorial时，有一件事我无法找到，那就是：

如何调整布局以决定窗口中哪个区域可以正确呈现，该教程中讨论的组件结构更像内容的逻辑结构，但没有太多相关的UI布局/样式。

有人能告诉我一个关于如何将样式应用于相应组件以确保它们位于正确位置的简单示例吗？

由于

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的布局

1 个答案: