react学习笔记3--数据双向绑定，组件通信

一、表单处理

1、受控组件-input元素

通过设置input元素的value值（或复选框的checked值）实现Getter，通过监听onChange事件实现Setter，从而实现数据双向绑定。


class element extends React.Component {
    state = {
        txt:"",
        checked:false
    }
    handleTxt = (e) => {
        this.setState({txt : e.target.value})
    }
    handleChecked = e => {
        this.setState({checked : e.target.checked})
    }
    render(){
        return (
            
            
        )
    }
}

多表单的优化操作：

1）给input元素加name,name=state中对应的数据名、2）统一用一个处理函数处理数据变化，函数内用e.target.name获取应该修改的状态名


class element extends React.Component {
    state = {
        txt:"",
        checked:false
    }
    handleForm = (e) => {
        let name = e.target.name
        let value = e.target.value||e.target.checked
        this.setState({[name] : value}) //!!这里要用[],否则会当作"name"字符串处理
    }
    render(){
        return (
            
            
        )
    }
}

2、非受控组件

二、组件通信

1、props:一个对象


import React from 'react'
import ReactDom from 'react-dom'
 
//函数式：porps形参
function Element1 (props){
    return (
        <p>{props.name}+{props.age}p>
    )
}
 
//类式：this.props
class Element2 extends React.Component{
    render(){
        return (
            <p>{this.props.name}+{this.props.age}p>
        )
    }
}
 
ReactDom.render(<Element1 name='bob' age={18}/>)
ReactDom.render(<Element2 name='bob' age={18}/>)

注：1)props可以传递任意数据类型，包括数组、对象、函数、dom结构等。2）props只读。3）在类中如果定义了constructor(props)则必须将props传入做形参，且需要在super(props)函数也传入props形参

组件间通信方式：

1）父传子：props传数据,如上

2）子传父：props传函数，通过回调函数传参方式

3）兄弟组件通信：状态提升，将共享状态的定义提升到公共父组件

2、context 跨级组件通信，祖先元素将数据传递给后代元素时使用

假设祖先 > subComponent > 后代

1）创建两个内置组件Provider、Comsumer

const {Provider,Consumer} = React.createContext()

2)祖先元素中用Provider包裹返回值


//祖先
render(){
    return (
        
            
        
    )
}

3)后代元素用Consumer {}包裹


render(){
    return(
        
            { data => 名字是：{data}
 }

三、props深入

1、props的children属性

当渲染组件时，组件中嵌套的内容视为children属性，可以通过props.children访问到。

嵌套的内容可以是文本、标签、组件、jsx语句、函数等


const App = (props)=>{
    props.children() //函数执行
    return (
        <div>{props.children}div>
    )
}
 
// ReactDom.render(这是一段文本)
// ReactDom.render(这是一个p标签)
// ReactDom.render(这是一个子组件)
// ReactDom.render({()=>console.log("这是一个函数")})

2、props校验，需要安装 prop-types包

常用的校验规则：

3、props默认值