邂逅react(十)-组件通信

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

class Header extends Component{//头部组件
  constructor(props){
    super(props)
  }
  render(){
    return (
      

我是头部

) } } class Banner extends Component{//Main中嵌套的广告组件 constructor(props){ super(props) } render(){ return (

我是banner

) } } class ShopList extends Component{//Main组件中的ShopList组件 constructor(props){ super(props) } render(){ return (
  • 商品1
  • 商品2
  • 商品3
) } } class Main extends Component{//Main组件 constructor(props){ super(props) } render(){ return (

我是主题内容

) } } class Footer extends Component{//Footer组件 constructor(props){ super(props) } render(){ return (

我是尾部

) } } class App extends Component{ constructor(props){ super(props) } render(){ return (
) } }

71593441295_.pic.jpg

页面结构
image.png
index为主页面,里面嵌套了三个子组件,Main里又嵌套着自己的子组件,这就涉及到各个组件通信的问题
下面先简单聊聊组建通信父传子
父传子 直接在组件上绑定属性传递数据
下面简单看一个简单的例子
父组件:

import SonCom from './SonCom'
class Father extends Component {
    state = {  }
    render() { 
        return ( 
            
{/* 父传子 可以直接传字符串 或者 数组 或者对象 注意:对象或数组需要放在花括号内 */}
); } } export default Father;

子组件

class SonCom extends Component {
   constructor(props){
        super(props)
        this.state={}
   }
    render() { 
    //解构
        const {data1,data2,data3}=this.props
        return ( 
            
{data1}
    { data2.map((item,index)=>{ return

    {item}

    }) }
{ Object.keys(data3).map((item,index)=>{ return

{data3[item]}

}) }
); } } export default SonCom;

父传子小结:父组件传子组件 可以通过在子组件里传入属性,子组件再通过props属性拿到父组件传过来的值

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

image.png
父组件

import Nav from './components/Nav'
class TabControl extends Component {
    constructor(props){
        super(props)
        console.log(this.props)
        this.state = { 
            arr:['流行音乐','古典音乐','田园风音乐'],
            num:0
            
         }
    }
   
    render() { 
        return ( 
            
); } //父组件自定义的事件 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 ( 
            
    { this.state.arr.map((item,index)=>{ return
  • { //给选中的导航栏加样式 this.setState({num:index}) //通过props拿到父组件传过来的函数,并把当前的Index传给父组件 this.props.toSon(index) }} className={this.state.num===index?'active':''} >{item}
  • }) }
); } } export default Nav;

小结:react中的父子组件通信,个人感觉父传子,子传父本质上没有区别,都是父组件通过属性把值传给子组件,子组件拿到值再进行自己的操作,可以把子传父理解成父传子的一种特殊情况(子传父,父组件给子组件通过属性传值,一般传字符串,数组,对象,等。父传子还是父组件通过属性给子组件传值,不同的是传的类型为父组件的自定义事件,子组件拿到这个自定义事件进行自己的操作,并把自己要传的值通过这个事件传给父元素~~~,父元素每次执行这个函数,就能拿到子元素传过来的值,这个就是子传父)
今天的分享完毕,感谢阅读

你可能感兴趣的