一个结合map函数与React.js中的this.props.children结合的例子

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

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

最后的 div.name 和 p.age 都具有一层黑色边框（1px solid #000000）外层结构。

解题思路：
CSS：

.border{
  border:1px solid #000000;
}

JavaScript：

class BlackBorderContainer extends Component {
  /* TODO */
  render(){
    return (
        <div>
          {this.props.children.map((el) => {
            return (  
              <div className='border'>{el}</div>
            )
          })}
        </div>
      )
  }
}

props.children
使用自定义组件的时候，可以在其中嵌套 JSX 结构。嵌套的结构在组件内部都可以通过 props.children 获取到.
props.children其实是个数组，React.js 就是把我们嵌套的 JSX 元素一个个都放到数组当中，然后通过 props.children 传给了 自定义的组件。
map函数：把一个数组映射到另一个数组中。

这里的map把props.children获取到的数组映射为数组el，然后把这个数组作为参数构造成一个匿名函数，返回值为


return (
<div className='border'>{el}</div>
)
。相当于给组件BlackBorderContainer进行了一次遍历，并在遍历过程中，将每个直系子元素（<div></div>、<p></p>）加上了黑色边框样式。