React入门三

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

Yl郁

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

阅读量359

点赞数

文章标签： react 前端开发语言

本文链接：https://blog.csdn.net/HiYulinlin/article/details/124434425

版权

本文介绍了React中组件之间的三种常见通讯方式：子组件通过props回调父组件的price变更、共享状态通过公共父组件管理、以及使用Context进行祖先后代组件的数据传递。详细展示了如何在实践中实现这些通信机制。

摘要由CSDN通过智能技术生成

组件通讯：子传父

父组件提供回调函数，通过 props 传递给子组件
子组件调用 props 中的回调函数，函数可传参
父组件函数的参数就是子组件传递的数据

//父
import React, { Component } from 'react'
import Child from './child'
export default class Parent extends Component {
    state={
        price:2000
    }
    changePrice=(num)=>{
        this.setState({
            price:this.state.price-num
        })
    }
  render() {
    return (
      <div>
          <p>手机的价格是：{this.state.price}</p>
        <Child changePrice={this.changePrice}></Child>
    </div>
    )
  }
}
-------------------------------------------------------------------------
//子
import React, { Component } from 'react'

export default class  extends Component {
  render() {
      const {changePrice} = this.props
    return (
      <div>
          <button onClick={()=>changePrice(500)}>砍一刀500</button>
      </div>
    )
  }
}

组件通讯：兄弟组件

将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态和修改状态的方法
需要通讯的组件通过 props 接收状态和函数即可

import { Component } from 'react'
import Jack from './components/jack'
import Rose from './components/rose'
class App extends Component {
    state = {
      mag:'我们一起'
    }
    changeMag=(str)=>{
        this.setState({
            mag:str
        })
    }
    render() {
        return (
            <>
                <Jack changeMag={this.changeMag}></Jack>
                <hr />
               <Rose mag={this.state.mag}></Rose>
            </>
        )
    }
}
export default App
--------------------------------------------------------------
import React from 'react'

const jack = ({changeMag}) => {
  return (
    <div>
        jack
    <button onClick={()=>changeMag('你先跳')}>跳</button>
    </div>
  )
}

export default jack
---------------------------------------------------------------
import React, { Component } from 'react'

export default class rose extends Component {
  render() {
    return (
      <div>rose===&gt;{this.props.mag}</div>
    )
  }
}

组件通讯：祖先后代

使用creatContext()创建一个上下文对象，包含：Provider Consumer 组件。
使用 Provider 包裹组件，value 属性注入状态，函数，被包裹组件下的任何组件可以使用。
使用 Consumer 消费 Provider 提供的数据和函数，语法{value=>使用数据和函数}

import {createContext} from 'react'
const Context = createContext()
export default Context
-----------------------------------------------------------------
import React, { Component } from 'react'
import Parent from './components/Parent'
import Context from './context'
export default class App extends Component {
  state = {
    money:1000
  }
  changeMoney = (num)=>{
    this.setState({
      money:this.state.money - num
    })
  }
  render() {
    return (
      <div>
          <Context.Provider value={{money:this.state.money,changeMoney:this.changeMoney}}>
        <h2>App组件===moeny是{this.state.money}</h2>
        <hr />
        <Parent></Parent>
        </Context.Provider>
      </div>
    )
  }
}
---------------------------------------------------------------------
import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {
  state = {
  }
  render() {
    return (
      <div>
        <h4>Parent</h4>
        <hr />
        <Child ></Child>
      </div>
    )
  }
}
----------------------------------------------------------------------
import React, { Component } from 'react'
import Context from '../context'
export default class Child extends Component {
  render() {
    return (
     
      <Context.Consumer>
   {
        (data)=>{
          console.log(data);
          return <div>
            <p>child</p>
            <p>money是{data.money}</p>
            <button onClick={()=>data.changeMoney(200)}>砍一刀</button>
          </div>
        }
   }
    </Context.Consumer>
     
    )
  }
}