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

1、所有的模板要被一个根节点包含起来
2、模板元素不要加引号
3、{}绑定数据      
4、绑定属性注意：
          
      class 要变成 className  
      for 要变成  htmlFor
      style属性和以前的写法有些不一样
    
           <div style={{'color':'blue'}}>{this.state.title}</div>
                <div style={{'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 style={{"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 id="box" className='red'>我是一个红的的div---id</div>


                 <br />

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

                <br />

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

                <input id="name"  />


                 <br />
                 <br />
                 <div style={{"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引用组件运行、测试即可