05.wrapper-components.md

Wrapper Components

对我们的组件进行包装来适配不同的样式/交互行为. 如果你想处理<div>或者其他HTML标签的话, 你可以使用组合.

当你创建React实例的时候, 你能在jsx标签内包裹其他的React组件或者任意的JavaScript表达式. 父组件通过this.props.children能访问到其包裹的子组件.

const SampleComponent = () => {
  <Parent>
    <Child />
  </Parent>
};

const Parent = () => {
  // 你能使用class 'bla'或者其他的class来给子组件加上不同的样式.
  <div className="bla">
    {this.props.children}
  </div>
};

值得一提的是, 包裹组件同样可以通过接收一个tag名来生成对应的HTML标签. 但是一般情况下我们不推荐这么做, 因为这样做的话你就不能添加属性或者传入props了.

const SampleComponent = () => {
  <Wrap tagName="div" content="Hello World" />
};

const Wrap = ({ tagName, content }) => {
  const Tag = `${tagName}`     // 变量名必须大写开头因为这是一个组件.
  return <Tag>{content}</Tag>
}

参考资料:

• Slides from my talk: Building Multi-tenant UI with React