[React Js] React 入門 ：組件 ( Component ) 的 巢狀結構

在前一篇的文章，[React Js] React 入門 ：建立 組件 ( Component ) 中，我們建立了一個自己的 React 組件 (Component) ， 接下來我們更進階一點，使用 巢狀結構 來使用 React 的 組件 (Component)

簡單來說 組件的 巢狀結構 ， 指的就是在 組件 中，還有 一個 或是 一個以上的子組件，如下：

 class 組件 extends React.Component{
   render(){
     return React.createElement({React.element},{屬性},{子組件}) // 注意這邊
   }
 }

 class 子組件 extends React.Component{
  render(){
     return React.createElement({React.element},{屬性},{組件子元素})
   }
}

實際案例：

使用 React 實作下面的結果：

<ul>
  <li>listItem</li>
  <li>listItem</li>
  <li>listItem</li>
</ul>

React.js :

 //組件
 class List extends React.Component{
   render(){
     var lists = [];
     for (var i = 0; i < 3; i++) {
       lists.push(React.createElement(ListItem))
     }
     return React.createElement('ul', null, lists) // 注意這邊
   }
 }

 //子組件
 class ListItem extends React.Component{
  render(){
     return React.createElement('li', null, 'listItem')
   }
 }

如果要使用 React.creatElement() 建立 多個 React Elemnt 了話，請在 第一個參數 React Element 中 帶入 陣列(Array)

接著一樣使用 ReactDOM.render() 做 渲染就可以了：

var list = React.createElement(List);
  ReactDOM.render(
    list, document.body
  )