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;