react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历

本文主要是介绍react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、绑定属性

constructor(){super()this.state={name:"张三",title:'我是一个title'}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div></div>)}

绑定属性直接使用花括号{}   注意！！这是jsx语法 如果要绑定类名  尽量用className

for 要换成htmlFor

使用style绑定属性则需要使用{{}}其中一个括号代表绑定数据  一个括号代表里面是一个对象

import '../assets/css/Home.css'
class Home extends Component {constructor(){super()this.state={name:"张三",title:'我是一个title',color:'red',}}render() {return (<div><div>aaaaaaa{this.state.name}<div title={this.state.title}>我是一个title</div></div><div className={this.state.color}>我是一个红色的div</div><label htmlFor="name" style={{"color":"green"}}>姓名</label></div>)}

2、引入图片

引入本地图片import logo from '../assets/images/logo.svg'
<img src={logo}  alt="404 not found"/> //第一种写法<img src={require('../assets/images/logo.svg').default}  
//第二种写法 .default不加会报错原因未知引入外地图片<img src="https://img1.360buyimg.com/da/jfs/t1/28596/34/11640/157517/5c90a874E18020832/df35ae12bc6f605d.gif?v=0.054155293101703306"}  
//直接引用即可

3、循环遍历

list:['111','222','333'],   
list2:[<h2>我是h2</h2>,<h2>我是h22</h2>]  {this.state.list2}//jsx语法允许这种写法 同理 如果我们能将list转化为list2的写法 也可以遍历出来render(){var listResault = this.state.list.map(function(value,key){return <li key={key}>{value}</li>})  //方式2return(<div>{this.state.list2} //方式1<ul>{listResault} //方式2</ul></div>)}
//注意给循环的数组指定key 否则会报warring写法3this.state = {list3: [{ title: "111" },{ title: "222" },{ title: "333" },{ title: "444" }]<ul>{this.state.list3.map(function (value, key) {return <li key={key}>{value.title}</li>  //  返回多行注意加()})}</ul>

这篇关于react笔记 8-17 属性绑定 class绑定 引入图片 循环遍历的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---