react 绑定数据 绑定属性 引入图片 循环数据

绑定数据:

需要注意在react 组件中没有this指向对象，所以我们必须在constructor 构造函数中进行super(props);

import React from 'react';

class Home extends React.Component{
    constructor (props) {
        super(props);
        this.state = {
            mes: "我是一个home组件",
            title: "我是home的标题"
        }
    }
    hanlederClick(e) {
        alert(e);
    }
    render() {

        return (
            <div>
                <h1 onClick={this.hanlederClick.bind(this)}> {this.state.title}</h1>
                <p> {this.state.mes} </p>
            </div>
        );
    }
}
export default Home;

绑定属性

class 是js中的关键字 在jsx语法中绑定class类属性用className代替；

for 中用htmlFor代替 <label for = 'name'> </label> ===> <label htmlFor = ''> </label>

style标签 绑定的两种方式：

1）： 直接{{}}  <h5 style={{"color": "red","font-size": "15px"}}>;

2）： this.state.style  = {}

 

 图片的引用：

   两种方式： require   或者 import 

   import Hyk from '../assets/imges/hyk.jpg'   组件引用；

   requrie   es5  一种方法；

 

 数组循环：

 

import React from 'react';
import Hyk from '../assets/imges/hyk.jpg'
class Image extends React.Component {

    constructor  (props){
       super(props);

       this.state = {

            students: [{
                name: "甘雪",
                age: 12,
                sex: 1
            },{
                name: "杨浩威",
                age: 23,
                sex: 2
            }]
       }
    };


    render() {


        let studentResult =  this.state.students.map((value,index)=>{
            value['sex'] = value['sex'] == 1? "女" : "男";

            return  <tr>
                        <td>{index}</td>
                        <td>{value['name']}</td>
                        <td>{value['age']}</td>
                        <td>{value['sex']}</td>
                    </tr>
        })

        return (

            <div>
                <div style={{width:"200px"}}>
                    <h1>import</h1>
                    <img width="200px" src={Hyk}/>
                </div>
                <div style={{width:"200px"}}>
                    <h1>require</h1>
                    <img width="200px" src={require('../assets/imges/hyk.jpg')}/>
                </div>

                <hr/>
                <table width="300" border="1" cellspacing="0" cellpadding="0">
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                    {studentResult}
                </table>

            </div>
        )
    }



}
export default Image;

 

App.js

import React, { Component } from 'react';
import './assets/css/App.css';
import Home from './components/Home';
import Imge from './components/Image';
class App extends Component {
  render() {
    return (
      <div className="App">
        <Home/>
        <Imge/>
        <header className="App-header">
            hello React!!
        </header>
      </div>
    );
  }
}

export default App;