03.React 创建组件、绑定属性( 绑定class 绑定style)、引入图片循环数组渲染数据...

最新推荐文章于 2024-04-07 15:07:31 发布

weixin_34023982

最新推荐文章于 2024-04-07 15:07:31 发布

阅读量195

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/glorylion/blog/3000862

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

嵌套一个div

2、模板元素不要加引号

    render(){
        return(
            <div>
                <h2>{this.state.msg}</h2>              
            </div>
        )
    }

3、{}绑定数据

4、绑定属性注意：

class 要变成 className （class为关键字）

for 要变成 htmlFor （for为关键字）

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、组件名称首字母大写、组件类名称首字母大写

8、JSX行内样式

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

9、引入图片，循环图片

转化成list2格式可以直接引用。
循环的元素需要指定唯一key

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;

转载于:https://my.oschina.net/glorylion/blog/3000862