2.新建子组件、jsx语法、绑定数据、class、style、引入图片、遍历数据

本接内容：创建组件、jsx语法、绑定数据、绑定对象、绑定属性

一、创建组件示例

注意 ：新建组件名首字母大写

1. 创建子组件

@file(Home.js)

import React, { Component } from 'react';
class Home extends Component {
    constructor() {
        super()
        // 定义数据
        this.state = {
            name: '张三',
        }
    }
    render() {
        return (
            <div>
                <div>我是首页</div>
                <div>第二行内容：姓名：{this.state.name}</div>
            </div>
        )
    }
}
export default Home;

2. 根组件中引入子组件

@file(App.js)

import logo from './assets/images/logo.svg';
import './assets/css/App.css';

// 引入组件
import Home from './components/Home';

function App() {
    return (
        <div className="App">
            你好，react-根组件
            <Home></Home>
        </div>
    );
}

export default App;

二、绑定属性

0.注意

1.class换成className
2.style
3.label for换成htmlFor

1.普通属性

<div title={this.state.name}>绑定属性</div>

2.绑定class名

1.正常模式

@file(index.css)
.red{color: red;}

@file(js)
import '../assets/css/index.css';

<div className='red'>绑定属性-class：来自文件中的class名</div>

2.绑定js文件中的变量名

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            txtcolor: 'red', // 1.js变量
        }
    }
    render() {
        return (
            <div>
                {/* 绑定js变量名 */}
                <div className={this.state.txtcolor}>绑定属性-class：取js数据的变量名</div>
            </div>
        )
    }
}

3.style

写法1

<div style={{'color':'red', 'fontSize': '20px'}}>行内样式写法</div>

写法2：绑定变量

this.state = {
    mystyle: {
        color: 'red',
        fontSize: '32px'
    }
}

// ...
<div style={this.state.mystyle}>行内样式写法-变量</div>

4.label for

<label htmlFor="name">姓名：</label>
<input id='name' type="text"/>

三、react引入图片的几种方式

1. img-import

import logo from '../assets/images/1.jpg';
<img src={logo} alt=""/> 

2. img-require-暂时失败

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

3.背景图

// css
.backimg{width: 200px;height: 200px;background: pink url('../images/1.jpg');}
// html
<div className="backimg">背景图</div>

4.img-网络图片

<img src="https://gimg2.baidu.com/jiche.png" />

四、循环遍历数据

注意：循环数据要加key

1.方式1

class News extends React.Component {
    constructor(props){
        this.state={
            arr: [{name: '张1',age: 20}, {name: '张2',age: 20}, {name: '张3',age: 20}]
        }
    }

    render(){
        let list = this.state.arr.map((val,key) => {
            return(
                <div key={key}>
                    <span>姓名：{val.name},</span>
                    <span>年龄：{val.age}</span>
                </div>
            )
        })
        return(
            <div className="newspage">
                <div>
                    {list}
                </div>
            </div>
        )
    }
}

2.方式2

class News extends React.Component {
    constructor(props){
        this.state={
            arr: [{name: '张1',age: 20}, {name: '张2',age: 20}, {name: '张3',age: 20}]
        }
    }

    render(){
        return(
            <div className="newspage">
                <div>
                    {this.state.arr.map((value,key) => {
                        return(
                            <div>
                                <span key={key}>{value.name},</span>
                                <span>年龄:{value.age}</span>
                            </div>
                        )
                    })}
                </div>
            </div>
        )
    }
}

五、react中解析html代码

作用：详情页取到html的文本，解析到页面

<div dangerouslySetInnerHTML={{__html:this.state.data.content}}></div>

十、冷知识

super

子类必须在constructor中调用super，否则新建实例会报错，因为子类没有自己的this对象，而是继承父类的this对象。如果不调用super，子类得不到this

class Person {
    constructor(name) {
        this.name = name;
    }
}
class Student extends Person{
    constructor(name, age){
        super();
        this.age = age;
    }
}