邂逅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
好了今天就分享到这里,欢迎你们留言