首页 > 其他分享> 文章详细

组件通讯的三种方式

2021-11-09 11:04:08 阅读：95 来源： 互联网

标签：React 通讯 render react state 三种 props 组件

组件之间通讯分为3种：

　　1. 父组件 -> 子组件

　　2. 子组件 -> 父组件

　　3. 兄弟组件

父组件传递数据给子组件

　　1. 父组件提供要传递的state数据

　　2. 给子组件标签添加属性，值为state中的数据

　　3. 子组件中通过props接收父组件中传递的数据

//1. 导入react
import React from 'react';
import ReactDOM from 'react-dom';

/*
  props
*/

// 父组件
class Parent extends React.Component {
  state = {
    lastName: '王'
  }

  render() {
    return (
      <div className="parent">
        父组件：
        <Child name={this.state.lastName} />
      </div>
    )
  }
}

// 子组件
const Child = (props) => {
  return (
    <div className="Child">
      <p>子组件，接收到父组件的数据：{props.name}</p>
    </div>
  )
}

// 1 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))

子组件传递数据给父组件

　　思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。

　　1. 父组件提供一个回调函数(用于接收数据)

　　2. 将该函数作为属性值，传递给子组件

　　3. 子组件通过props调用回调函数

　　4. 将子组件的数据作为参数传递给回调函数

//1. 导入react
import React from 'react';
import ReactDOM, { render } from 'react-dom';

/*
  props
*/

// 父组件
class Parent extends React.Component {
  state = {
    parentMsg:""
  }
  //提供回调函数，用来接收数据
  getChildMsg = date => {
    console.log('接收到子组件传递过来的数据：', date);

    this.setState({
      parentMsg:date
    })
  }

  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}

// 子组件
class Child extends React.Component {
  state = {
    msg:'刷抖音'
  }

  handleClick = () => {
    //子组件调用父组件中传递过来的回调函数
    this.props.getMsg(this.state.msg)
  }

  render() {
    return (
      <div className="Child">
        子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}
// 1 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))

兄弟组件

　　将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

　　思想：状态提升

　　公共父组件职责：1. 提供共享状态2. 提供操作共享状态的方法

　　要通讯的子组件只需通过props接收状态或操作状态的方法

//1. 导入react
import React from 'react';
import ReactDOM, { render } from 'react-dom';

/*
  props
*/

// 父组件
class Counter extends React.Component {
  // 提供共享状态
  state = {
    count: 0
  }

  //提供修改状态的方法
  onIncrement = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

  render() {
    return (
      <div>
        <Child1 count={this.state.count} />
        <Child2 onIncrement={this.onIncrement} />
      </div>
    )
  }
}

// 子组件
const Child1 = props => {
  return (
    <h1>计数器：{props.count}</h1>
  )
}

const Child2 = props => {
  return(
    <button onClick={() => props.onIncrement()}>+1</button>
  )
}

// 1 传递数据
ReactDOM.render(<Counter />, document.getElementById('root'))

标签：React,通讯,render,react,state,三种,props,组件
来源： https://www.cnblogs.com/wsl56/p/15527771.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

组件通讯的三种方式