React绑定

每一个对象展示都需要一个key，否则会弹出警告

一、绑定对象

1. 循环方法1：在return()方法中循环

              <ul>
                {
                    this.state.list2.map(function(value,key){
                        return (<li key={key}>{value.title}</li>);
                    })
                }
              </ul>

 2. 循环方法2：在return()方法前定义变量

render() {
        var x =this.state.list.map( function(value,key){
            return <li key={key}>{value}</li>
        })   //循环数据要加Key  循环方法1

        return (
            <div>         
                
               <ul>{x}</ul>
            </div>
        );
    }

 二、绑定方框：点击姓名方框选中

return (
            <div>         
                <label htmlFor="name">姓名</label>
                <input id="name" />
                <h4>点击姓名方框选中</h4>
                   
            </div>
        );

 三、绑定图片的三种方法

第一种：开头引用图片物理地址

第二种：src里面绑定物理地址

第三种：得到图片网络地址

import image1 from '../assets/images/2.jpg'
<img src={image1}></img>

<img src={require('../assets/images/1.jpg')} />

<img src='https://img0.baidu.com/it/u=165870305,2099164956&fm=26&fmt=auto'></img>
                

四、调整样式的三种方法

第一种style={{ }} 直接设置样式

第二种通过constructor定义样式数据，return绑定

return (
            <div>         
                 <h4 style={{color:'blue'}}>点击姓名方框选中</h4>  
                 <h4 style={this.state.style}>点击姓名方框选中22</h4>  
                 <div  className='purple'> 这是一个div</div>  
               
            </div>
        );

第三种在css文件中设置样式，组件中引用css文件

 

import React ,{Component} from "react";
import '../assets/css/index.css'
class Test extends Component {
    constructor(props){
        super(props);
        this.state={
            style:{
                color:'red',
                fontSize:'40px'
            }
        }
    }
    render() {
          

        return (
            <div>         
                 <h4 style={{color:'blue'}}>第一种</h4>  
                 <h4 style={this.state.style}>第二种</h4>  
                 <div  className='purple'> 第三种</div>  
               
            </div>
        );
    }
}

export default Test; //暴露这个组件