ホームページ > 記事 > ウェブフロントエンド > リアクションコミュニケーションにはどのような方法があるのでしょうか?
React の通信メソッドには次のものが含まれます: 1. 親子コンポーネント通信に props を使用する; 2. 子親コンポーネント通信にコールバック関数を使用する; 3. 兄弟コンポーネント通信に変数プロモーションを使用する; 4. 相互通信に Context を使用する-コンポーネント通信; 5. 単一インスタンス通信にはノードのイベント モジュールを使用; 6. データ通信を共有するには redux を使用します。
このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。
#React の 6 つの通信メソッド
1. Props 親子通信2. コールバック関数、親子通信
3 .変数プロモーション、兄弟コンポーネント通信
4.コンテキスト、コンポーネント間通信
5.ノードのイベントモジュールの単一インスタンス通信
6.Redux共有データ通信
1.props親子通信
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('改变了') }}> 点击我改变爸爸传给我的东西 </button> </div> ) } function Parent() { let [text, setText] = useState('这是爸爸传给你的东西') function handleChange(val) { setText(val) } return ( <div> <p>Parent</p> <Children handleChange={handleChange} text={text}></Children> </div> ) } export default Parent
3. さまざまな昇進、兄弟間のコミュニケーション #function Children(props) {
return (
<div>
<p>Children</p>
<button onClick={() => { props.setText('我是Children发的信息') }}>给Children1发信息</button>
</div>
)
}
function Children1(props) {
return (
<div>
<p>Children1</p>
<p>{props.text}</p>
</div>
)
}
function App() {
let [text, setText] = useState('')
return (
<>
<div>APP</div>
<Children setText={setText}></Children>
<Children1 text={text}></Children1>
</>
)
}
export default App
古い書き方
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: '我是爸爸的信息' } } render() { return ( <div> <p>Parent</p> <Children></Children> </div> ) } } export default Parent新しい書き方
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: '我是context' }}> <div> <p>Parent</p> <Children1></Children1> </div> </Provider> ) } } export default Parent5.単一インスタンス通信ノード
function Children(props) {
return (
<div>
<p>Children</p>
<p>{props.text}</p>
<button onClick={() => { props.event.emit('foo') }}>点击我改变爸爸传给我的东西</button>
</div>
)
}
function Parent() {
let [text, setText] = useState('这是爸爸传给你的东西')
let event = new Events()
event.on('foo', () => { setText('改变了') })
return (
<div>
<p>Parent</p>
<Children event={event} text={text}></Children>
</div>
)
}
export default Parent
注⚠️: この種の通信の場合は、先頭に events
node 独自のモジュール。
6.redux共有データ通信store.js
import { createStore } from 'redux' let defaultState = { text: '我是store' } let reducer = (state = defaultState, action) => { switch (action) { default: return state } } export default createStore(reducer)child.js
import React from 'react' import { connect } from 'react-redux' class Child extends React.Component { render() { return ( <div>Child<p>{this.props.text}</p></div> ) } } let mapStataToProps = (state) => { return { text: state.text } } export default connect(mapStataToProps, null)(Child)Parent.js
class Parent extends React.Component { render() { return ( <Provider store={store}> <div> <p>Parent</p> <Child></Child> </div> </Provider> ) } } export default Parent注:
redux
とreact-redux を忘れずにインストールしてください。 [関連する推奨事項: Redis ビデオ チュートリアル
]以上がリアクションコミュニケーションにはどのような方法があるのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。