目录
1、函数式组件 VS 类组件
区别:
没有state,并且只包含一个render,上一个demo
function Square(props) {
return (
<button
className="square"
onClick={props.onClick}
>
{props.value}
</button>
)
}
- 类组件,就是以class类的形式封装的组件:
class Square extends React.Component {
constructor(props) {
super(props)
this.state = {
value: null
}
}
render() {
return (
<button
className="square"
onClick={() => {
// this.setState({value: 'x'})
this.props.onClick()
}}>
{this.props.value}
</button>
);
}
}
两者的区别就是,类组件需要使用this引用state,而函数式组件,接受一个参数props,直接调值;
2、父子传值:(传值、传方法)
父组件:
import React from 'react'
import Test from './Test'
class Demo extends React.Component {
constructor(props) {
super(props)
this.state = {
name: '张三'
}
}
handleClick() {
alert('xxx')
}
render() {
return (
<Test
name={this.state.name}
onClick={this.handleClick}
/>
)
}
}
子组件:通过props接收数据
import React from "react";
class Square extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<button
className="square"
onClick={() => {
this.props.onClick()
}}>
{this.props.name}
</button>
);
}
}
export default Square;
3、react中动态渲染列表
render() {
const arr = [[0, 1, 2], [3, 4, 5], [6, 7, 8]]
return (
<div>
// 使用map遍历集合
<div>
{
arr.map((item, index) => {
return <div key={index} className="board-row">
{
item.map((list, index) => {
return <span key={index}>
{
this.renderSquare(list)
}
</span>
})
}
</div>
})
}
</div>
// 原始dom
{/*<div className="board-row">*/}
{/* {this.renderSquare(0)}*/}
{/* {this.renderSquare(1)}*/}
{/* {this.renderSquare(2)}*/}
{/*</div>*/}
{/*<div className="board-row">*/}
{/* {this.renderSquare(3)}*/}
{/* {this.renderSquare(4)}*/}
{/* {this.renderSquare(5)}*/}
{/*</div>*/}
{/*<div className="board-row">*/}
{/* {this.renderSquare(6)}*/}
{/* {this.renderSquare(7)}*/}
{/* {this.renderSquare(8)}*/}
{/*</div>*/}
</div>
);
}
4、动态设置class
。。。。
constroct(props){
super(props)
this.status = {isCurrentIndex: 0}
}
jumpTo(move) {
this.setState({
isCurrentIndex: step,
}
);
}
render() {
return (
<button
className={this.state.isCurrentIndex === move? "isActive" : "none"}
onClick={() => this.jumpTo(move)}
>{desc}</button>
)
}
。。。。
.isActive {
background-color: coral;
color: #ffffff;
}