import React,{Component} from 'react';
import '../assets/css/inde.css';
import logo from '../assets/images/logo.jpg';
/**
* 绑定属性注意
* class要变成className
* for要换成htmlFor
* style要转换成 <div style={{"color":'red'}}>我是红色的div 行内样式 </div>
* 其他的属性和其他的写法是一样的
* 引入本地图片 import logo from '../assets/images/logo.jpg';
* 而引入网上的图片直接引入链接就可以
*/
class News extends Component{
constructor(props){
super(props);//用于父子组件传值,如果不用的父子组件传值可以直接去掉这个,但是建议写
//定义数据
this.state={
user:"ligengxian",
color:'red',
style:{
color:'red',
fontSize:'40px'
},
list:[
'11111','22222','3333333'
],
list2:[
<h2>我是一个h2</h2>,<h2>我是一个h2</h2>,<h2>我是一个h2</h2>
],
list3:[
{title:"新闻11111"},
{title:"新闻12111"},
{title:"新闻13111"},
{title:"新闻14111"}
]
}
}
render(){
//通过这样list格式就转化成了lsit2格式,就可以直接输出了
let l=this.state.list.map(function(value,key){
return <li key={key}>{value}</li>
})
return(
<div>
<h1>{this.state.user}</h1>
<ul>
<li>这是一个列表</li>
<li>这是一个列表</li>
<li>这是一个列表</li>
</ul>
<div title={this.state.user}>我是一个div</div>
//给这个div引入颜色
<div className={this.state.color}>我是红色的div </div>
<label htmlFor="name">姓名</label>
<input id="name"/>
//接下来我们要给div写一个行内的样式,看下怎么写
<div style={{"color":'red'}}>我是红色的div 行内样式 </div>
<div style={this.state.style}>我是红色的div 行内样式 </div>
<div className="news">
<p>图片:
<img src={logo}></img>
<img src={require('../assets/images/logo2.jpg')}></img>
<img src="http://pic16.nipic.com/20111006/6239936_092702973000_2.jpg"></img>
</p>
</div>
<br/>
{this.state.list2}
<ul>{l}</ul>
<br/>
<ul>{
//花括号就可以自己写js的代码 */
//处理list3数组加对象进行处理
this.state.list3.map(function(value,key){
//如果返回的数据是多行的话就用一个()给他,key也给他指定
return (<li key={key}>{value.title}</li>)
//接着模板里面循环数据
})
}
</ul>
</div>
)
}
}
export default News;