学习React(1)

1. react路由跳转 this.props.history.push 进行跳转 

参数: pathname: "/XXX" 跳转路径

参数: state{id:XXX,title:XXX}  路由传参

<button onClick={() => {
                    this.props.history.push({
                        pathname: '/Login', //要跳转到的路径
                        state: {  //参数地址栏不显示，刷新地址栏，参数不丢失
                            id: 456
                        }
                    })
                }}>去详情页</button>

跳转页面接收参数

componentDidMount() {
        console.log(this.props.history.location.state);
    }

2.jsx 中动态渲染元素

在jsx 中只能写JS表达式  而不能写语句体(比如if,for...)

const data = ["161", "156sdfs", "fsaf"]
class Home extends Component { //创建一个 ClickMe的类，继承与Component 【注】组件名首字母必须大写
    render() { //react里的一个生命周期，用于渲染dom
        return ( //return 里写的是jsx代码，和html基本一致
            <div>
                <h1>16516</h1>
                <ul>
                    {
                        data.map((item, index) => {
                            return <li key={index}>{item}</li>
                        })
                    }
                </ul>
            </div>
        )
    }

}

3.JSX中定义函数组件   首字母必须大写  否则浏览器会自动解析为HTML标签

函数组件中的this 不会只想window  而是指向undefined  因为jsx中转意之后会将代码自动转换为严格模式

在严格模式中函数禁止指向window

function Demo(){
            return <h2>渲染函数组件</h2>
        }

使用组件

<Demo/>

 3.1函数组件传值

<Demo name="165516"/>

function Demo(props){
   console.log(props);
   return <h2>{props.name}</h2>
}

4.类式组件  props 来接收值   将定义的类重定到 react的component 类上边 然后将类导出

import React, { Component } from 'react';
class Dome1 extends Component {
    render () {
        console.log(this.props);
        return (
            <h1>{this.props.name}</h1>
        )
    }
}
export default Dome1;

要使用当前组件

import React, { Component } from 'react'; //引入react 首字母必须大写
import Dome1 from "./components/dome1/index"

class Login extends Component {
    
    render() { //react里的一个生命周期，用于渲染dom
        return ( //return 里写的是jsx代码，和html基本一致
            <div>
                <Dome1 name="51616"/>
            </div>
        )
    }

}
export default Login;

4.1 类组件中的state 用来存放状态  类似与vue 中的data()方法

类中的状态值不可以直接更改,必须调用实例中的setState()方法来实现实时更改

import React, { Component } from 'react';
class Dome1 extends Component {
    constructor(props) {
        super(props)
    }
    state = {
        isHor: false
    }
    render() {
        const { isHor } = this.state

        return (
            <div>
                <h1>{this.props.name}</h1>
                <h2>今天天气很炎热{isHor ? "炎热" : "凉爽"}</h2>
                <button onClick={this.dome}>切换</button>
            </div>
        )
    }
    dome = () => {
        console.log(this);
        const a = !this.state.isHor
        this.setState({ isHor: a })
    }

}
export default Dome1;