邂逅react(三)

react学习之路...分享两个经典小案例
一、循环展示数组列表

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(
{data}
)
                   }
                    return (
                        

                           
{datas}
                        
                    );
                }

            }

           ReactDOM.render(,document.getElementById('root'))   

2.最常用的方法

class List extends React.Component{
            
            constructor(){
                super()
                    this.state={
                       arr:['尚渔味烤鱼','海底捞','云海肴云南菜','外婆家']                    }
                    
               }
               render(){
                   return (
                        

                           

                               {
                               
                                  this.state.arr.map((item,index)=>{
                                      return 
{item}'666'
                                   })
                                }
                            
                        
                   );
               }

          }

           ReactDOM.render(,document.getElementById('root'))   

二、实现简单的加法减法运算

 class Calculate extends React.Component{
            constructor(){
                super()
                this.state={
                //保存要操作的变量
                    num:0
                }
            }
            render(){
                return (
                    

                    
                        +
                        -
                        
                        
{this.state.num}
                    
                );
            }
            add(){
                this.setState({//通过setState方法来改变数据
                    //加法运算函数
                    num:this.state.num-1
                })
            }
            reduce(){
            //减法运算函数
                this.setState({
                    num:this.state.num+1
                })
            }
           
        }

        ReactDOM.render(,document.getElementById('root'))

几个注意事项：
1.调用setState一定要加上this,这里的setState方法是当前继承自父组件的
2.jsx不支持内联样式语法,jsx中的类要写成className,否则报错
3.注意类组件里的this指向,需要自己去bind
好了今天就分享到这里,欢迎大家留言