#13 黑色边框的容器组件

实现一个组件 BlackBorderContianer,它会把作为它的嵌套结构的 每个直接子元素 都用一个黑色边框的 div包裹起来。例如:

<BlackBorderContainer>
  <div className='name'>My Name:Lucy</div>
  <p className='age'>
    My Age:<span>12</span>
  </p>
</BlackBorderContainer>

最后的 div.namep.age 都具有一层黑色边框(1px solid #000000)外层结构。

class BlackBorderContainer extends Component{
    render(){
        return (
            <div>
                {
                    this.props.children.map(function(el){
                        return (<div className="border">{el}</div>)
                    })
                }
            </div>
        )
    }
}
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与F...
    心淡然如水阅读 1,293评论 0 0
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,784评论 1 19
  • 基本内容: html超文本标记语言。 页面组成: html>//版本声明 //万国码——gb1312解决中文乱码 ...
    Spencerhyuk阅读 1,408评论 0 1
  • 最终效果如图: 打开Rules中的Customize Rules如图: 在CustomRules.js里找到sta...
    启鸣Simon阅读 1,690评论 0 1
  • 少年在学堂读书, 脸上流露一抹微笑。 中年在外奔波生计, 心里深藏一丝微笑。 老年在树下乘凉, 蒲扇送来凉风的微笑。
    小剧在成长阅读 188评论 3 7

友情链接更多精彩内容