在前一篇的文章,[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
  )
Summary
[React Js] React 入門 :組件 ( Component ) 的 巢狀結構
Article Name
[React Js] React 入門 :組件 ( Component ) 的 巢狀結構
Description
在前一篇的文章,[[React Js] React 入門 :建立 組件 ( Component )](https://goo.gl/f5vKDT) 中,我們建立了一個自己的 React 組件 (Component) , 接下來我們更進階一點,使用 `巢狀結構` 來使用 React 的 組件 (Component)
Author

Facebook 功能: