邂逅react(三)

react學習之路...分享兩個經典小案例
1、循環展現數組列表

1.咱們能夠直接 for循環 而後展現

class List extends React.Component{
            
               constructor(){
                    super()
                    this.state={
                        arr:['尚漁味烤魚','海底撈','雲海餚雲南菜','外婆家']
                    }
                    
               }
               render(){
                    //外部定義數組
                   let datas=[]
                   //循環數組 取出每一項值 拼接到li列表項 放數組裏
                   //注意列表展現的數據要設置惟一的key值
                   for (let data of this.state.arr){
                       datas.push(<li key={data}>{data}</li>)
                   }
                    return (
                        <div>
                           <ul>{datas}</ul>
                        </div>
                    );
                }

            }

           ReactDOM.render(<List/>,document.getElementById('root'))

2.最經常使用的方法

class List extends React.Component{
            
            constructor(){
                super()
                    this.state={
                       arr:['尚漁味烤魚','海底撈','雲海餚雲南菜','外婆家']                    }
                    
               }
               render(){
                   return (
                        <div>
                           <ul>
                               {<!--遍歷數組 利用數組的高階函數map方法 將數組選項一一映射進去-->
                               <!--map的三個選項item(數組選項)index(下標)array(原數組)-->
                                  this.state.arr.map((item,index)=>{
                                      return <li key={item+index}>{item}'666'</li>
                                   })
                                }
                            </ul>
                        </div>
                   );
               }

          }

           ReactDOM.render(<List/>,document.getElementById('root'))

2、實現簡單的加法減法運算

class Calculate extends React.Component{
            constructor(){
                super()
                this.state={
                //保存要操做的變量
                    num:0
                }
            }
            render(){
                return (
                    <div>
                    <!--給加法減法按鈕綁上函數-->
                        <button onClick={this.add.bind(this)}>+</button>
                        <button onClick={this.reduce.bind(this)}>-</button>
                        <!--運算結果展現-->
                        <h1>{this.state.num}</h1>
                    </div>
                );
            }
            add(){
                this.setState({//經過setState方法來改變數據
                    //加法運算函數
                    num:this.state.num-1
                })
            }
            reduce(){
            //減法運算函數
                this.setState({
                    num:this.state.num+1
                })
            }
           
        }

        ReactDOM.render(<Calculate/>,document.getElementById('root'))

幾個注意事項：
1.調用setState必定要加上this,這裏的setState方法是當前繼承自父組件的
2.jsx不支持內聯樣式語法,jsx中的類要寫成className,不然報錯
3.注意類組件裏的this指向,須要本身去bind
好了今天就分享到這裏,歡迎你們留言