React コンポーネント値の受け渡し - 逆方向の値の受け渡し - 兄弟値の受け渡し

値を逆に渡す -- props を使用して親コンポーネント関数を受け取ります

子コンポーネントが親コンポーネントにデータを送信する

コールバック関数を使用して、親コンポーネントが関数を提供し、子コンポーネントが呼び出してデータを関数のパラメータとして渡します。

サブアセンブリ

import React, { Component } from 'react'

export default class zi extends Component {
  render() {
    return (
      <div>
          zizizizzizi
          {/* 1.逆向传值必须通过事件来触发 一个父组件传递过来的函数*/}
          <button onClick={this.props.demofun}>点我进行逆向传值</button>
      </div>
    )
  }
}

親コンポーネント

import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
    fufun=()=>{
        
    }
  render() {
    return (
      <div>
          fuffufufufuf
          {/* 2.父组件给子组件传递一个函数 */}
          <Zi demofun={this.fufun}></Zi>
        
      </div>
    )
  }
}

サブアセンブリ

import React, { Component } from 'react'

export default class zi extends Component {
  render() {
    return (
      <div>
          zizizizzizi
          {/* 1.逆向传值必须通过事件来触发 一个父组件传递过来的函数*/}
          {/* 3.给函数进行实参的传递 */}
          <button onClick={this.props.demofun.bind(this,"我是子组件的数据")}>点我进行逆向传值</button>
      </div>
    )
  }
}

親コンポーネント

import React, { Component } from 'react'
import Zi from "./zi.jsx"
export default class fu extends Component {
    // 4.父组件设置形参接收子组件绑定的实参
    fufun=(text)=>{
            console.log("我是父组件的函数",text)
    }
  render() {
    return (
      <div>
          fuffufufufuf
          {/* 2.父组件给子组件传递一个函数 */}
          <Zi demofun={this.fufun}></Zi>
        
      </div>
    )
  }
}

兄弟パス

Pubsub-js

React のデフォルトでは、兄弟に値を渡すことはできないので、これを実行したい場合は、 pubsub-js (はい、-js、間違って覚えないでください) ライブラリに依存する必要があります。

1.npm install --save pubsub-js

2. Pubsub.publish("カスタムイベント名", "データ") 発行をスローして使用し、渡す必要があるコンポーネント内にカスタムイベントを作成します。

import React, { Component } from 'react'
// 1.引用pubsub-js
import Pubsub from "pubsub-js"
export default class zia extends Component {
    fun=()=>{
        // 2.publish抛出自定义事件
        Pubsub.publish("zia","我是zia的数据么么哒！！！！！")
    }
  render() {
    return (
            <div>
        aaaaaaaa
        <button onClick={this.fun}>点我吧数据给B</button>
      </div>

  }
}

2. カスタムイベントをリッスンするためにサブスクライブするデータを受信するコンポーネントで Pubsub.subscribe("the events you listen to", ()=>{}) を使用します。

import React, { Component } from 'react'
// 3.引用pubsub
import Pubsub from "pubsub-js"
export default class zib extends Component {
    constructor(){
        super()
        console.log("1.react初始化数据")
    }
    componentWillMount(){
        console.log("2.在渲染之前调用")
    }
    componentDidMount() { 
    //    接收   监听同胞传值的自定义事件
        // 回调函数的第一个形参是你监听的自定义事件的名字
        // 回调函数的第二个形参就是自定义事件上绑定的数据
    Pubsub.subscribe("zia",(a,b)=>{
        console.log(a)
        console.log(b)
    })

     }
  render() {
      console.log("3开始渲染")
    return (
      <div>zib</div>
    )
  }
}

ステータス向上 - 仲介者モード

一言で言えば、React における状態のプロモーションは、複数のコンポーネントが共有する必要がある状態を、最も近い親コンポーネントにプロモートすることです。

親コンポーネントでこの状態を変更し、props を介して子コンポーネントに配布します。