关于javascript:邂逅react十组件通信

react 组件化开发波及到组件嵌套的问题, 这就会呈现组件间的通信
先以一个简略的例子展现组件间的嵌套(类组件举例)

class Header extends Component{// 头部组件
  constructor(props){super(props)
  }
  render(){
    return (
      <div>
        <h2> 我是头部 </h2>
      </div>
    )
  }
}

class Banner extends Component{//Main 中嵌套的广告组件
  constructor(props){super(props)
  }
  render(){
    return (
      <div>
       <h4> 我是 banner</h4>
      </div>
    )
  }
}
class ShopList extends Component{//Main 组件中的 ShopList 组件
  constructor(props){super(props)
  }
  render(){
    return (
      <div>
        <ul>
          <li> 商品 1 </li>
          <li> 商品 2 </li>
          <li> 商品 3 </li>
        </ul>
      </div>
    )
  }
}

class Main extends Component{//Main 组件
  constructor(props){super(props)
  }
  render(){
    return (
      <div>
        <h2> 我是主题内容 </h2>
        <Banner/>
        <ShopList/>
      </div>
    )
  }
}
class Footer extends Component{//Footer 组件
  constructor(props){super(props)
  }
  render(){
    return (
      <div>
        <h2> 我是尾部 </h2>
      </div>
    )
  }
}

class App extends Component{constructor(props){super(props)
  }
    render(){
      return (
        <div>
          <Header/>
          <Main/>
          <Footer/>
        </div>
      )
    }
}

页面构造

index 为主页面, 外面嵌套了三个子组件,Main 里又嵌套着本人的子组件, 这就波及到各个组件通信的问题
上面先简略聊聊组建通信父传子
父传子 间接在组件上绑定属性传递数据
上面简略看一个简略的例子
父组件：

import SonCom from './SonCom'
class Father extends Component {state = {}
    render() { 
        return ( 
            <div>
                {/* 父传子 能够间接传字符串 或者 数组 或者对象 留神：对象或数组须要放在花括号内 */}
                <SonCom data1="123" data2={[1,2,3]} data3={{name:'尚渔味烤鱼',price:'200$',weight:'800g'}}/>
            </div>
         );
    }
}
 
export default Father;

子组件

class SonCom extends Component {constructor(props){super(props)
        this.state={}}
    render() { 
    // 解构
        const {data1,data2,data3}=this.props
        return ( 
            <div>
            <!-- 取字符串并展现 -->
               <div>{data1}</div>
               <ul>
               <!-- 取数组 遍历展现 -->
                   {data2.map((item,index)=>{return <h3 key={index}>{item}</h3>
                       })
                   }
               </ul>
               <div>
               <!-- 取对象 -->
                    {Object.keys(data3).map((item,index)=>{return <h2 key={index}>{data3[item]}</h2>
                        })
                    }
               </div>
            </div>
         );
    }
}
 
export default SonCom;

父传子小结：父组件传子组件 能够通过在子组件里传入属性，子组件再通过 props 属性拿到父组件传过来的值

子传父小案例：
点击子导航栏，父组件的内容跟着变动
1. 父组件定义事件，以属性的模式将这个事件传给子组件
2. 子组件通过 props 属性拿到父组件传过来的事件, 再把本人要传的数据通过这个事件传给父组件

父组件

import Nav from './components/Nav'
class TabControl extends Component {constructor(props){super(props)
        console.log(this.props)
        this.state = {arr:['流行音乐','古典音乐','田园风音乐'],
            num:0
            
         }
    }
   
    render() { 
        return ( 
            <div>
                <Nav toSon={index=>this.getNum(index)}/>
                <div className="content">
                    {
                    //  通过 num 变量切换显示的内容
                        <h2>{this.state.arr[this.state.num]}</h2>
                    }
                </div>
            </div>
         );
    }

    // 父组件自定义的事件
    getNum(index){console.log(index)
        // 拿到子组件传过来的 index 赋值给 num 变量
        this.setState({num:index})
    }
}
 
export default TabControl;

子组件：

class Nav extends Component {
    state = {arr:['风行','古典','田园风'],
        num:0
     }
     constructor(props){super(props)
         console.log(this.props)
     }
    render() { 
        return ( 
            <div>
                <ul>
                    {this.state.arr.map((item,index)=>{return  <li key={index} onClick={()=>{
                                // 给选中的导航栏加款式
                                this.setState({num:index})
                                // 通过 props 拿到父组件传过来的函数, 并把以后的 Index 传给父组件
                                this.props.toSon(index)
                            }}  
                            className={this.state.num===index?'active':''}
                            >{item}</li>
                        })
                    }
                   
                </ul>
            </div>
         );
    }
    
}
 
export default Nav;

小结：react 中的父子组件通信，个人感觉父传子, 子传父实质上没有区别, 都是父组件通过属性把值传给子组件，子组件拿到值再进行本人的操作, 能够把子传父了解成父传子的一种非凡状况 (子传父，父组件给子组件通过属性传值, 个别传字符串，数组，对象，等。父传子还是父组件通过属性给子组件传值，不同的是传的类型为父组件的自定义事件，子组件拿到这个自定义事件进行本人的操作，并把本人要传的值通过这个事件传给父元素~~~，父元素每次执行这个函数，就能拿到子元素传过来的值, 这个就是子传父)
明天的分享结束，感激浏览