基础知识-非父子组件通信 ​

import React, { Component } from 'react'
import ReactDom from 'react-dom';
<!-- 子组件Childen1 -->
const Childen1 = (props) => {
    const {name,content,ClickContent} = props
    return (
        // 传递数据给父组件 父组件接收到之后 传给Childen2组件
        <div onClick={() => {
            ClickContent(content)
        }}>
            {name}
        </div>
    )
}
<!-- 子组件Childen2 -->
const Childen2 = (props) => {
    const {Content} = props
    return (
        // 接收父组件中转传递过来的值
        <div>
            {Content}
        </div>
    )
}
<!-- 父组件 -->
class App extends Component {
    state = {
        list: [
            {id:1,name:'前端猛男1',content:'我是前端猛男1'},
            {id:2,name:'前端猛男2',content:'我是前端猛男2'},
            {id:3,name:'前端猛男3',content:'我是前端猛男3'},
            {id:4,name:'前端猛男4',content:'我是前端猛男4'},
        ],
        Content:'' //共享的内容
    }
  render() {
    return (
    // 通过父组件中间人的形式 来传递数据
    <div>
         { this.state.list.map((item) => {
             return <Childen1 key={item.id} {...item} ClickContent={(Content) => {
                // 接收子级传来的数据 赋值给共享状态
                 this.setState({ Content: Content })
            }}></Childen1> 
        }) }      
        <Childen2 Content={this.state.Content}></Childen2>        
      </div>
    )
  }
}
ReactDom.render(<App/>,ducoment.getElementById('root'))