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>
}
参考资料:
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程