[JavaScript知识库]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>
        })  //方式2
        return(
            <div>
      
                {this.state.list2} //方式1
                <ul>
                    {listResault} //方式2
                </ul>
            </div>
        )
    }
//注意给循环的数组指定key 否则会报warring


写法3

this.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>