React實例 列表組件

新建組件

現在SRC的目錄下面，新建一個文件Xiaojiejie.js文件，然後寫一個基本的HTML結構。代碼如下：

import React,{Component} from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <div>
               <div><input /> <button> 增加服務 </button></div>
               <ul>
                   <li>頭部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </div>
        )
    }
}
export default Xiaojiejie 

這個文件現在還沒有什麼功能，只是寫完了一個小組件。然後我們把入口文件的組件換成Xiajiejie組件。

組件外層包裹原則

這是一個很重要的原則，比如上面的代碼，我們去掉最外層的< div >，就回報錯，因爲React要求必須在一個組件的最外層進行包裹。

Fragment標籤

加上最外層的DIV，組件就是完全正常的，但是你的佈局就偏不需要這個最外層的標籤怎麼辦?比如我們在作Flex佈局的時候,外層還真的不能有包裹元素。這種矛盾其實React16已經有所考慮了，爲我們準備了< Fragment >標籤。

要想使用< Fragment >，需要先進行引入。

import React,{Component,Fragment } from 'react'

然後把最外層的

標籤，換成< Fragment >標籤，代碼如下。

import React,{Component,Fragment } from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <Fragment>
               <div><input /> <button> 增加服務 </button></div>
               <ul>
                   <li>頭部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </Fragment>
        )
    }
}
export default Xiaojiejie