React 学习之组件封装

本文用以记录在学习 React 过程种遇到的一些组件封装技巧。

布局组件

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

思想： 新建一个组件，并在这个组件的最外层元素上应用固定样式。可以将需要使用此样式的组件放在其中，也可通过接受参数传入的组件。

---