react中数据通信方式

定义五个组件：如下图

   class Wrapper extends React.Component{
    state = {color:"red"}
    changeColor = (color)=>{
        this.setState({color})
    }
    render(){
        return(
            <div style={{border:`8px solid ${this.state.color}`,padding:"5px"}}>
                <h1>Wrapper</h1>
                <Header color={this.state.color}></Header>
                <Main changeColor={this.changeColor.bind(this)} color={this.state.color}></Main>
            </div>
        )
    }
}

当点击Content中的按钮时,边框要变为相对应的颜色，所以我们需要将State中的color逐级传递，并且需要将更改状态的方法传递给Content组件。

1.单向数据流props

接收使用Wrapper传过来的状态，并传递给下一级组件

    class Header extends React.Component{
    render(){
        return(
            <div style={{border:`8px solid ${this.props.color}`,padding:"5px"}}>
                <h1>Header</h1>
                <Title color={this.props.color}></Title>
            </div>
        )
    }
}

    class Main extends React.Component{
    render(){
        return(
            <div style={{border:`8px solid ${this.props.color}`,padding:"5px",marginTop:"10px"}}>
                <h1>Main</h1>
                <Content changeColor={this.props.changeColor}  color={this.props.color}></Content>
            </div>
        )
    }
}

接收使用Title传递过来的状态值

class Title extends React.Component{
    render(){
        return(
            <div style={{border:`8px solid ${this.props.color}`,padding:"5px"}}>
                <h1>Title</h1>
            </div>
        )
    }
}

接收使用Content组件传过来的状态与方法

class Content extends React.Component{
    render(){
        return(
            <div style={{border:`8px solid ${this.props.color}`,padding:"5px"}}>
                <h1>Content</h1>
                <button onClick={()=>this.props.changeColor("blue")}>变蓝</button>
                <button onClick={()=>this.props.changeColor("green")}>变绿</button>
            </div>
        )
    }
}

2.redux共享数据

见上篇：react-redux库中connect()方法与Provider组件的使用

地址：juejin.cn/post/684490…

3.context上下文

let ColorContext = React.createContext();

首先创建一个上下文，可以为我提供两个所需的API(Provider,Consumer)

ColorContext.Provider:表示提供数据

ColorContext.Consumer:表示使用数据

定义一个对象存储定义好的state

let contextValue = { color: this.state.color, changeColor: this.changeColor }

• 在函数组件中使用context

  

• 在类组件中使用context：需要给类加上一个静态属性tatic contextType = ColorContext;，值就是这个上下文