Question

我正在使用react路由器导航到侧栏上我的应用程序中的不同路由。我使用内联样式来响应所有设计。而且，我正在使用flexbox来实现设计。我是初学者，并没有完全掌握造型的概念。这基本上就是我想做的：

app.jsx

render() {
    const styles = {
        container: {
            display: 'flex',
            height: '100%'
        },
        sidebar: {
            container: {
                backgroundColor: 'blue'
            }
        },
        header : {
            width: '100%'
        }
    };
    return (
        <div style={styles.container}>
            <Sidebar style={styles.sidebar} links={sidebarLinks} />
            <Header />
            {this.props.children}
            <Footer />
        </div>
    );
}

提前谢谢！

Answer 1

我就你的问题提出了example

var Hello = React.createClass({
  render: function() {
    const styles = {
           main: {
             margin: 0,
             padding: 0,
             display: 'flex',
             height: '600',
             flexDirection: 'column'
          },
          article: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'red',
             flex: 6,
             order: 2,
             alignItems: 'stretch'
          },
          header: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'green',
             flex: 1,
             order: 1
          },
          footer: {
             margin: '4px',
             padding: '5px',
             borderRadius: '7pt',
             background: 'blue',
             flex: 1,
             order: 3
          }
        }
    return (
        <div style={styles.main}>
          <article style={styles.article}>
            <p>this is your content</p>
          </article>
          <header style={styles.header}>header</header>
          <footer style={styles.footer}>footer</footer>
        </div>
    )
  }
});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

基本思想是在样式中使用“flex”来控制组件的比例。例如，我的标题，文章，页脚的“flex”是1,6,1。因此高度的比例是1：6：1。此外，您可以通过'order'

来控制组件的订单

React：Flexbox使用具有反应路由器的内联样式

1 个答案: