react的组件通信二

子与子的通信找一个共同的父组件进行传递

也就是一个字传父和父传子的组合

子组件的代码Child7

import React from 'react'

export default function Child7({ list }) {
    return (
        <div>
            {list.map((item, index) => {
                return <button key={index}>{item}</button>
            })}
        </div>
    )
}

子组件的代码 Child8

import React, { Component } from 'react'

export default class Child8 extends Component {
    constructor(props){
        super(props);
        this.state= {
            username:""
        }
    }
    render() {
        return (
            <div>
                设置内容
                <input value={this.state.username} onChange={(e)=>{
                    this.setState({
                        username:e.target.value
                    })
                }}/>
                <button onClick={()=>{
                    this.props.addListItem(this.state.username);
                }}>赋值</button>
            </div>
        )
    }
}

父组件

import React, { Component } from 'react'
import Child7 from '../components/Child7'
import Child8 from '../components/Child8'

export default class Menu5 extends Component {
    constructor(props){
        super(props);
        this.state = {
            list:["lili","leson","lala"]
        }
    }
    addListItem= (item)=>{
        this.setState({
            list:[...this.state.list,item]
        })
    }

    render() {
        return (
            <div>
                子传子
                <Child7 list={this.state.list}></Child7>
                <Child8 addListItem={this.addListItem}></Child8>
            </div>
        )
    }
}

跨层级的通信 在src中建一个文件夹context 再在这个文件夹中写一个index.js里面写入

import  React  from  "react";
export  default  React.createContext("100");

爷组件

import React, { Component } from 'react'
import Child9 from '../components/Child9'
import NumContext from "../context";

export default class Menu6 extends Component {

    render() {
        return (
            <div>
                跨层级
                <NumContext.Provider value={{
                    num:999
                }}>
                <Child9></Child9> //子组件
                </NumContext.Provider>
            </div>
        )
    }
}

子组件

import React, { Component } from 'react'
import Child10 from "./Child10";

export default class CHild9 extends Component {
    render() {
        return (
            <div>
                子元素
                 <Child10></Child10> //孙组件
            </div>
        )
    }
}

孙组件

import React, { Component } from 'react'
import  NumContext from  "../context"

export default class Child10 extends Component {
    static contextType  = NumContext;
    render() {
        return (
            <div>
                我是孙元素 跨层级的数据为{this.context.num}
            </div>
        )
    }
}