Les méthodes de communication de React incluent : 1. Utiliser des accessoires pour la communication entre les composants parent-enfant ; 2. Utiliser des fonctions de rappel pour la communication entre les composants enfant-parent ; 3. Utiliser la promotion de variables pour la communication entre les composants frères et sœurs ; 5. Utiliser le nœud Le module d'événements effectue une communication singleton ; 6. Utiliser Redux pour partager la communication des données.
L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.
Les six méthodes de communication de React
1. Accessoires de communication parent-enfant
2. Fonction de rappel, communication enfant-parent
3. Promotion variable, communication entre composants frères et sœurs
4. Contexte, communication entre composants
5. module de communication d'événements node Singleton
6. communication de données partagées redux
1.props communication parent-enfant
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. Promotion variable, communication de l'établissement Brother
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
4.Contexte, communication inter-assemblées
Ancienne façon d'écrirefunction 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
5.Single de Node tonne de communication du module d'événements
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 Parent
Note⚠️ : Pour ce genre de communication, pensez à introduire le module events en haut, pas besoin d'installer, node son propre module.
6.redux communication de données partagées
store.jsfunction 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
import { createStore } from 'redux'
let defaultState = {
text: '我是store'
}
let reducer = (state = defaultState, action) => {
switch (action) {
default: return state
}
}
export default createStore(reducer)
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)
Remarque : n'oubliez pas d'installer
reduxet
react-redux.
【Recommandations associées : Tutoriel vidéo Redis】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!