React——组件通讯

组件通讯介绍

组件中的状态是私有的,组件的状态只能在组件内部使用,无法直接在组件外使用,但是我们在日常开发中,通常会把相似、功能完整的应用才分成组件(工厂模式)利于我们的开发,而不同组件直接又需要传递数据,而这个过程就是组件通讯。

组件通讯-父子间、兄弟间传值props

props,学过vue的其实我们都很熟悉,都是父组件传递给子组件的一种方式。

props 是只读对象,只能读取属性,无法修改,属于单向数据流。

根本作用:接收(其他组件)传递给当前组件的数据

如何传递

// 传递数据:给组件标签添加属性 用{}内部传入数据,数据类型依据输入决定
<New userName='hyy' id={'1233414'} />

函数组件接受,参数props直接接受

// 接收数据(函数组件):
// props :{ userName='hyy' id={'1233414'} }
function getProps(props) {
  return (
    <div>
      <div>{props.userName}</div>
      <div>{props.id}</div>
      </div>
  )
}

Class组件接受,this.props接受

// 接收数据(类组件):
// this.props :{ userName='hyy' id={'1233414'} }
class New extends Component {
  render() {
    return (
        <div>
      <div>{this.props.userName}</div>
      <div>{this.props.id}</div>
        </div>
    ) 
  }
}
组件通讯-父传子 props 代码示例
// 父组件传值
class Parent extends React.Component {
    state = { userName: 'hyy' }
    render() {
        return (
            <div>
               <Child userName={this.state.userName} />
            </div>
        )
    }
}
// 子组件获取 函数组件
function Child(props) {
	return <div>{props.userName}</div>
}
// 子组件获取 类组件
class Child extends React.Component {
    render(){
        return <div>{this.props.userName}</div>
    }
}
组件通讯-子传父 props 代码示例

跟vue很像,通过props传递回调函数给子组件,子组件调用函数传递参数给父组件

// 声明一个回调函数,传递给子组件
class Parent extends React.Component {
    getChildData = (data) => {
        console.log('子组件数据传递的数据', data)
    }
    render() {
        return (
            <div>
            	<Child getData={this.getChildData} />
            </div>
        )
    }
}
// 子组件调用函数,通过传递参数传递给父组件
class Child extends React.Component {
    state = { childData: '子传父 props' }
    handleClick = () => {
    	this.props.getData(this.state.childData)
    }
    return (
    	<button onClick={this.handleClick}>传递数据给父元素</button>
    )
}
组件通讯-兄弟组件 props 代码示例

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

核心内容:把共同的父组件当中eventBus的数据处理中心

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Bor1 from './bor1'
import Bor2 from './bor2'
// 父组件
class App extends Component {
  state = {
    borData: '',
  }
  render() {
     // 给兄弟1传递改变方法,给兄弟2传递被改变的值
    return (
      <div
        <Bor1 change={this.changebor2Data}>兄弟组件1</Bor1> 
        <Bor2 borData={this.state.borData}>兄弟组件2</Bor2>
      </div>
    )
  }
  // 兄弟1传递给兄弟2 borData的修改方法
  changebor2Data = (borData) => {
    this.setState({
      borData,
    })
  }
}
ReactDOM.render(<App />, document.getElementById('root'))
// 兄弟组件1
import React, { Component } from 'react'

export default class Bor1 extends Component {
  render() {
    return (
      <div>
        <button onClick={this.change}>改变兄弟2的值</button>
      </div>
    )
  }
  change = () => {
    this.props.changebor2Data('兄弟2值改变了')
  }
}
// 兄弟组件2
import React, { Component } from 'react'

export default class Bor2 extends Component {
  render() {
    return (
      <div>
       {this.props.borData}
      </div>
    )
  }
}

组件通讯 - 跨级组件 Context(不常用,但是是redux的基础)

context实现跨级组件通讯

步骤:1、在最高级组件中创建一个context对象 createContext

​ 2、用解构赋值 解构出Provider,Consumer

​ 3、利用Provider最外层应用,通过value=“data” ,提供共享的数据

data一般是个对象,传递state的值或者当前组件的方法

​ 4、利用Consumer组件去接受共享的数据

​ {data =>接受组件的render内容}

import { createContext } from 'react'
const { Provider, Consumer } = createContext()

// 通过Provider组件包裹,我们需要向child组件传递data
<Provider value="data">
  <div>
    <Child /> 
  </div>
</Provider>

// child组件中使用 Consumer组件接收要共享的数据
<Consumer>
  {data => <span>{data}</span>}
</Consumer>

你可能感兴趣的:(React,react.js,javascript,前端)