Maison > Article > interface Web > Explication détaillée de l'utilisation de la communication par composants dans React
Explication détaillée de l'utilisation de la communication par composants dans React
- php中世界最好的语言original
- 2018-05-24 14:22:071230parcourir
Cette fois, je vais vous apporter une explication détaillée de l'utilisation de la communication par composants dans React. Quelles sont les précautions lors de l'utilisation de la communication par composants dans React. Voici des cas pratiques, jetons un coup d'œil.
Communication entre les composants
Ici, nous parlons uniquement de la communication entre le composant React et le composant lui-même. La communication entre les composants est principalement divisée en trois parties :
- Communication entre le composant parent et le sous-composant : le composant parent transmet les paramètres au sous-composant ou le composant parent appelle la méthode du sous-composant
- Le sous-composant communique avec le composant parent : le sous-composant transmet les paramètres au composant parent ou au sous-composant. méthode du composant parent
- Communication entre composants frères : les composants frères se transmettent des paramètres ou s'appellent
- Parent : La méthode d'appel du composant enfant utilise principalement
this.refs.c1.changeChildren1 - Parent : utilisez principalement
text={this.state.text} - pour transmettre des paramètres au composant enfant. Enfant : définissez la méthode changeChildren1 que le composant parent doit appeler <.> Enfant : utilisez l'attribut pass
- Récupérez les paramètres transmis par le composant parent
this.props.text
//父组件向子组件通信
//父组件
var ParentComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
this.setState({text: event.target.value});
//调用子组件的方法
this.refs.c1.changeChildren1(event.target.value);
},
render: function(){
return (
<p>
<p><label>父组件</label><input type="text" onChange={this.change}/></p>
<ChildrenComponent1 ref="c1" text={this.state.text}/>
</p>
)
}
})
//子组件
var ChildrenComponent1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被父组件调用执行
changeChildren1: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>子组件-来自父组件的调用：{this.state.text}</p>
<p>子组件-来自父组件的传参：{this.props.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent1/>, document.getElementById('p1'));
- Parent : Définissez la méthode changeParent pour fournir l'appel du composant enfant
- Enfant : La méthode d'appel du composant parent utilise principalement
this.props.change(event.target.value);
//子组件向父组件通信
//父组件
var ParentComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件调用执行
changeParent: function(text){
this.setState({text: text});
},
render: function(){
return (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent2 change={this.changeParent}/>
</p>
)
}
})
//子组件
var ChildrenComponent2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件</label><input type="text" onChange={this.change}/></p>
</p>
)
}
})
ReactDOM.render(<ParentComponent2/>, document.getElementById('p2'));
- Méthode 1 : Communiquer via un composant parent commun
- Parce qu'il doit y avoir un et un seul élément de niveau supérieur dans un composant React, il y aura certainement quelque chose en commun entre les composants frères et sœurs L'élément parent (composant) de , Ainsi, les frères peuvent communiquer via l'élément parent commun (composant) La méthode de communication peut être réalisée. en combinant le père-fils et le fils-père introduits ci-dessus
//兄弟组间通信-通过共同的父组件通信
//父组件
var ParentComponent3 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
//被子组件2调用，向子组件1通信
changeChildren1: function(text){
//调用子组件1的方法
this.refs.cp1.changeState(text);
},
//被子组件1调用，向子组件2通信
changeChildren2: function(text){
//调用子组件2的方法
this.refs.cp2.changeState(text);
},
render: function(){
return (
<p>
<p>父组件-来自子组件的调用：{this.state.text}</p>
<ChildrenComponent3_1 change={this.changeChildren2} ref="cp1"/>
<ChildrenComponent3_2 change={this.changeChildren1} ref="cp2"/>
</p>
)
}
})
//子组件1
var ChildrenComponent3_1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件2
var ChildrenComponent3_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.props.change(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
})
ReactDOM.render(<ParentComponent3/>, document.getElementById('p3')); est la même que la communication à travers un composant parent commun. 🎜> est appelé. Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !
//兄弟组间通信-通过 context 通信
//父组件
var ParentComponent4 = React.createClass({
getChildContext: function(){
return {
changeChildren1: function(text){
this.refs.cp1.changeState(text)
}.bind(this),
changeChildren2: function(text){
this.refs.cp2.changeState(text)
}.bind(this)
}
},
childContextTypes: {
changeChildren1: React.PropTypes.func.isRequired,
changeChildren2: React.PropTypes.func.isRequired
},
render: function(){
return (
<p>
<ChildrenComponent4_1 ref="cp1"/>
<ChildrenComponent4_2 ref="cp2"/>
</p>
)
}
})
//子组件1
var ChildrenComponent4_1 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren2: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren2(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件1</label><input type="text" onChange={this.change}/></p>
<p>来自子组件2的调用-{this.state.text}</p>
</p>
)
}
})
//子组件2
var ChildrenComponent4_2 = React.createClass({
getInitialState: function(){
return {
text: ''
}
},
contextTypes: {
changeChildren1: React.PropTypes.func.isRequired
},
changeState: function(text){
this.setState({text: text});
},
//输入事件
change: function(event){
//调用子组件的方法
this.context.changeChildren1(event.target.value);
},
render: function(){
return (
<p>
<p><label>子组件2</label><input type="text" onChange={this.change}/></p>
<p>来自子组件1的调用-{this.state.text}</p>
</p>
)
}
});
ReactDOM.render(<ParentComponent4/>, document.getElementById('p4'));
Explication détaillée des étapes de mise en œuvre de PromiseA+
Explication détaillée des étapes pour mettre en évidence les éléments sélectionnés li dans l'implémentation de React
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!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation du cycle de vie dans ReactArticle suivant：Explication détaillée de l'utilisation du cycle de vie dans React