題目：
實現一個元件 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>）加上了黑色邊框樣式。