React 绑定属性， 绑定class 绑定style、引入图片和循环数组渲染数据

1、所有的模板要被一个根节点包含起来

2、模板元素不要加引号

3、{}绑定数据

4、绑定属性注意：

class 要变成 className

for 要变成 htmlFor

style属性和以前的写法有些不一样

<div color':'blue'}}>{this.state.title}</div>

<div color':this.state.color}}>{this.state.title}</div>

5、循环数据要加key

6、组件的构造函数中一定要注意 super

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

constructor(props){

super(props); /*用于父子组件传值 固定写法*/

this.state={

userinfo:'张三'

}

}

7、组件名称首字母大写、组件类名称首字母大写

demo：

import React from 'react';

import '../assets/css/index.css';

/*
react绑定属性注意：

    class要换成className

    for要换成 htmlFor

    style:

           <div color":'red'}}>我是一个红的的 div  行内样式</div>


    其他的属性和以前写法是一样的

*/

class Home extends React.Component{

    // 子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象

    constructor(props){
        super(props);   //固定写法

        this.state={

            msg:'我是一个home组件',
            title:'我是一个title',
            color:'red',
            style:{

                color:'red',
                fontSize:'40px'
            }
        }
    }
    render(){
        return(
            <div>
                <h2>{this.state.msg}</h2>

                <div title="1111">我是一个div</div>

                <br />
                <div title={this.state.title}>我是一个div</div>

                <br />

                <div  className='red'>我是一个红的的div---id</div>


                 <br />

                <div className={this.state.color}>我是一个红的的div  1111</div>

                <br />

                <label htmlFor="name">姓名</label>

                <input   />


                 <br />
                 <br />
                 <div color":'red'}}>我是一个红的的 div  行内样式</div>


                  <br />
                 <br />
                 <div style={this.state.style}>我是一个红的的 div  行内样式</div>



                
            </div>
        )

    }    
}
export default Home;

import React from 'react';


import '../assets/css/index.css';

import logo from '../assets/images/1.jpg';

class News extends React.Component{

    constructor(props){
        super(props);
        this.state={
            msg:'新闻',
            list:['11111111111','222222222222','3333333333333'],            
            
            list2:[<h2 key='1'>我是一个h2</h2>,<h2 key='2'>我是一个h2</h2>],


            list3:[

                {title:"新闻11111111"},
                {title:"新闻22222"},
                {title:"新闻33333333"},
                {title:"新闻444444444"}
            ]
        }
    }

    render(){

        let listResult=this.state.list.map(function(value,key){

                return <li key={key}>{value}</li>
        })



        return(
            <div className="news">

                {this.state.msg}

                <img src={logo} />
                <img src={require('../assets/images/1.jpg')} />

                <img src="https://www.baidu.com/img/xinshouye_353af22a7f305e1fb6cfa259394dea9b.png" />


                <hr/>
               

                {this.state.list2}
                <hr/>
                <ul>
                     {listResult}
                </ul>

                 <hr/>

                <ul>

                     {

                        this.state.list3.map(function(value,key){

                            return (<li key={key}>{value.title}</li>);

                        })
                    }
                </ul>

            </div>
        )
    }

}

export default News;

app.js引用组件运行、测试即可