Apakah kaedah komunikasi tindak balas?

Kaedah komunikasi tindak balas termasuk: 1. Gunakan prop untuk komunikasi komponen ibu bapa-anak; -komunikasi komponen; 5. Gunakan modul acara nod untuk komunikasi contoh tunggal;

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

Enam kaedah komunikasi React

1. props komunikasi ibu bapa-anak
2. Fungsi panggil balik, komunikasi anak-ibubapa
3 .Kenaikan pangkat pembolehubah, komunikasi komponen adik beradik
4.Konteks, komunikasi merentas komponen
5.Komunikasi contoh tunggal modul acara nod
6.komunikasi data kongsi redux

1.props komunikasi ibu bapa-anak

function Children(props) {
      return (
        <div>
          <p>Children</p>
          <p>{props.text}</p>
        </div>
      )
    }
    function Parent() {
      return (
        <div>
          <p>Parent</p>
          <Children text="这是爸爸传给你的东西"></Children>
        </div>
      )
    }
    
    export default Parent

2 .

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.handleChange(&#39;改变了&#39;) }}>
        点击我改变爸爸传给我的东西
      </button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  function handleChange(val) {
    setText(val)
  }
  return (
    <div>
      <p>Parent</p>
      <Children handleChange={handleChange} text={text}></Children>
    </div>
  )
}
export default Parent

Cara penulisan lama

Cara penulisan baharu

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <button onClick={() => { props.setText(&#39;我是Children发的信息&#39;) }}>给Children1发信息</button>
    </div>
  )
}
function Children1(props) {
  return (
    <div>
      <p>Children1</p>
      <p>{props.text}</p>
    </div>
  )
}

function App() {
  let [text, setText] = useState(&#39;&#39;)
  return (
    <>
      <div>APP</div>
      <Children setText={setText}></Children>
      <Children1 text={text}></Children1>
    </>
  )
}
export default App

modul komunikasi acara tunggal 5.nod

Nota⚠️: Untuk komunikasi jenis ini, ingat untuk memperkenalkan modul

class Children extends React.Component {
  static contextTypes = {
    text: PropsType.string
  }
  render() {
    return (
      <div>
        <p>Children</p>
        <p>{this.context.text}</p>
      </div>
    )
  }
}

class Parent extends React.Component {
  static childContextTypes = {
    text: PropsType.string
  }
  getChildContext() {
    return {
      text: &#39;我是爸爸的信息&#39;
    }
  }
  render() {
    return (
        <div>
          <p>Parent</p>
          <Children></Children>
        </div>
    )
  }
}
export default Parent

acara

di bahagian atas, tidak perlu memasang, nodModul kendiri.

const { Consumer, Provider } = React.createContext()

class Children extends React.Component {
  render() {
    return (
      <Consumer>
        {
          (value) => (
            <div>
              <p>Children1</p>
              <p>{value.text}</p>
            </div>
          )
        }
      </Consumer>
    )
  }
}

class Parent extends React.Component {
  render() {
    return (
      <Provider value={{ text: &#39;我是context&#39; }}>
        <div>
          <p>Parent</p>
          <Children1></Children1>
        </div>
      </Provider>
    )
  }
}

export default Parent

6.redux berkongsi komunikasi data

store.js

function Children(props) {
  return (
    <div>
      <p>Children</p>
      <p>{props.text}</p>
      <button onClick={() => { props.event.emit(&#39;foo&#39;) }}>点击我改变爸爸传给我的东西</button>
    </div>
  )
}

function Parent() {
  let [text, setText] = useState(&#39;这是爸爸传给你的东西&#39;)
  let event = new Events()
  event.on(&#39;foo&#39;, () => { setText(&#39;改变了&#39;) })
  return (
    <div>
      <p>Parent</p>
      <Children event={event} text={text}></Children>
    </div>
  )
}
export default Parent

child.jsParent.js

Nota: Ingat untuk memasang redux dan react-redux

.

[Cadangan berkaitan:

import { createStore } from 'redux'

let defaultState = {
    text: '我是store'
}

let reducer = (state = defaultState, action) => {
    switch (action) {
        default: return state
    }
}

export default createStore(reducer)

Tutorial video Redis

]

Atas ialah kandungan terperinci Apakah kaedah komunikasi tindak balas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!