React学习08_组件间的传值与this的绑定

最新推荐文章于 2024-06-11 19:09:38 发布

原创最新推荐文章于 2024-06-11 19:09:38 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

react学习笔记专栏收录该内容

8 篇文章

订阅专栏

本文深入探讨React中组件之间的数据传递方法，包括父子组件、子向父组件传值及兄弟组件间的数据交流。通过实例讲解如何利用props和state实现有效的数据流动，并介绍bind(this)在方法绑定中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React学习08_组件间的传值与this的绑定

父子传值
子向父传值
- bind(this,...args)
兄弟间传值

父子传值

父组件在使用子组件时，给它的属性传入想给它的数据
子组件通过 this.props.属性名可以获取该数据

子向父传值

父组件向子组件传入一个带参数的方法
子组件通过向这个方法传入自己的数据，在父组件触发该方法，父组件通过 this.setState 来修改父组件的值并渲染从而实现子向父传值

bind(this,…args)

该方法主要是把当前实例绑定到方法目标方法中
如下面的代码:
父组件

import React, { Component } from 'react';
import News from './New'
import Phone from './phone'
export default class componentName extends Component {
    constructor(props){
        super(props)
        this.state={
            text:"我是默认值"
        }
    }
    dataFun=(text)=>{
        this.setState({
            text
        })
    }
    render() {
        return (
            <div> 
                <News fufun={this.dataFun}/>
            </div>
        );
    }
}

子组件

import React, { Component } from 'react';
import PubSub from 'pubsub-js'
export default class componentName extends Component {
    constructor(props) {
        super(props)
        this.state = {
            ziText: "我是子组件的数据"
        }
    }
    render() {
        return (
            <div>
                <button onClick={this.props.fufun.bind(this,this.state.ziText)}>点我进行数据的发送</button>
            </div>
        );
    }
}

子组件的第一个参数this，表示将该方法的this指向自己(而不是父组件的this)
第二个参数就是上传的值

兄弟间传值

npm i pubsub-js --save,该插件如同放置一个全局的map
导包 import PubSub from 'pubsub-js’
兄弟1 组件

pubsub(){
      PubSub.publish('evt',this.state.num)
  }
<button onClick={this.pubsub.bind(this)}>点我进行同级传值</button>

兄弟2组件
导包，然后就可以使用了

PubSub.subscribe("evt",(msg,data)=>{
    console.log("phone"+data)
})