#13 黑色边框的容器组件

2017-12-19  本文已影响0人  康乐芳华

实现一个组件 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>
        )
    }
}
上一篇 下一篇

猜你喜欢

热点阅读