react 组件传值 状态机/state

组件

本质 自定义标签

组件的特点优势

强内聚 弱耦合

提高了代码的复用性

降低了测试难度

代码的复杂度也大大降低

组件的分类

在react中有两种组件的写法

函数组件--无状态组件

语法:

function 函数名(组件名 但是名字首字母必须必须必须必须 必须 大写){

return (

jsx

)

}

类组件--有状态组件

语法：

class 类名(当前组件名首字母大写) extends React.Component{

render(){ render方法也叫做渲染方法 他的作用就是渲染当前的jsx

return(

jsx

)

}

}

props

正向传值

props能修改吗?

props是只读的 不能修改

语法:

props函数组件

语法 ：

只需要在函数组件中添加一个props的形参 即可使用props

子组件接收

// 子组件需要把props当成形参传入
let Zi=(props)=>{
    let {text,num}=props
​
    return(
        <div>
            zizizziziziziz---{text}--{num}
        </div>
    )
}
export default Zi

父组件传递

import Fz from "./funpropszi.jsx"
let Fu=()=>{
    let obj={text:"text数据",num:"num数据"}
    return(
        <div>
            fufufufuffufufu
            {/* 传递参数可是用扩展运算符 */}
            <Fz {...obj}/>
        </div>
    )
}
export default Fu

props类组件

this.props.xxx

1.子组件配置props

import React, { Component } from 'react'
​
export default class propszi extends Component {
    render() {
        return (
            <div>
                zizizzizizizizzz---{this.props.text}
                <br />
                {this.props.num}
            </div>
        )
    }
}

2.父组件传值

import React, { Component } from 'react'
​
import Pz from "