react基础学习二 --- 数据循环展示、组件定义、事件绑定

一、数据循环展示
方式一、使用map循环数组.

 var arr = ['a','b','c','d'];

            ReactDOM.render(
                <div>
                    {
                        arr.map((item,index)=>{
                            return <div key={index}>{item}</div>
                        })
                    }
                </div>,document.getElementById('my'));

方式二、for循环

// for循环
            var arr = ['a','b','c','d'];
            var  str =  [];

            for (let i = 0; i < arr.length; i++) {
               str.push(<div key={i}>{arr[i]}</div>)    
            }
            ReactDOM.render(
                <div>
                   {str}
                </div>,document.getElementById('my'));

二、组件
定义组件的方式：Class和Function
方式1 使用function的方式定义 传递参数要显示传递props

function Com(){
                return <h1>这是一个组件</h1>
            }
 ReactDOM.render(
                <div>
                   <Com></Com>
                </div>,document.getElementById('my')
            );

方式二：使用class的方式定义 传递参数使用this.props接收

//    组件
            var obj = {
                name :'abc&