Dans les appels mutuels entre les composants de réaction, l'appelant est appelé le composant parent et l'appelé est appelé le composant enfant. Les valeurs peuvent être transmises entre les composants parent et enfant : 1. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent ;2. Composant enfant Lorsque vous transmettez des valeurs au composant parent, vous devez les transmettre au composant parent via la méthode de déclenchement.
L'environnement d'exploitation de ce tutoriel : système Windows7, version React18, ordinateur Dell G3.
1. Composants dans React
Le composant React est une balise non HTML auto-définie. Il est stipulé que la première lettre du composant React est en majuscule :
la classe App étend le composant{}<App />
2. Composants parent-enfant
Lorsque des composants s'appellent, l'appelant est appelé le composant parent et l'appelé est appelé le composant enfant :
importer React depuis 'react'; importer des enfants depuis './Children';class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children /> </div> ) }}export default Up;import React from 'react';class Children extends React.Component{ constructor(props){ super(props); this. state = { } } render(){ return ( <div> Enfants </div> ) }}export default Children ;
3. Le composant parent transmet la valeur au composant enfant
Les composants parents transmettent des valeurs aux composants enfants à l'aide d'accessoires. Lorsqu'un composant parent transmet une valeur à un composant enfant, la valeur à transmettre est d'abord transmise au composant enfant, puis dans le composant enfant, les accessoires sont utilisés pour recevoir la valeur transmise par le composant parent.
Le composant parent définit une propriété lors de l'appel du composant enfant :
<Children msg="Le composant parent transmet la valeur au composant enfant" />
Cette valeur msg sera liée à l'attribut props du sous-composant, et le sous-composant pourra être utilisé directement :
ceci.props.msg
Les composants parents peuvent transmettre des valeurs et des méthodes aux composants, et peuvent même se transmettre eux-mêmes aux composants enfants.
3.1 Valeur de passage
importer React depuis 'react'; importer des enfants depuis './Children';class Up extends React.Component { constructor(props){ super(props); this.state = { } } render(){ console.log("render "); return( <div> up <Children msg="Le composant parent transmet la valeur au composant enfant" /> </div> ) }}export default Up;import React from 'react';class Children étend React.Component{ constructeur (props){ super(props); this.state = { } } render(){ return ( <div> Enfants <br /> {this.props.msg} </div> ) }}exporter les enfants par défaut ;
3.2 Méthode de transmission
importer React depuis 'react'; importer des enfants depuis './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log ("méthode d'exécution du composant parent"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}export default Up ;importer React depuis 'react';class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { this.props.run( } render(); ){ return ( <div> Enfants <br /> <button onClick={this.run}>Exécuter</button> </div> ) }}exporter les enfants par défaut ;
3.3 Passer le composant parent au composant enfant
importer React depuis 'react'; importer des enfants depuis './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } run = () => { console.log ("Méthode d'exécution du composant parent"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}export default Up;import Réagissez à partir de 'react';class Children extends React.Component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg } render); (){ return ( <div> Enfants <br /> <button onClick={this.run}>Exécuter</button> </div> ) }}exporter les enfants par défaut ;
4. Le sous-composant transmet la valeur au composant parent
Le composant enfant transmet la valeur au composant parent via la méthode de déclenchement.
importer React depuis 'react'; importer des enfants depuis './Children';class Up extends React.Component { constructor(props){ super(props); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render"); return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}export par défaut Up; importer React from 'react';class Children extends React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> <button onClick={() = > {this.props.upFun("child component data")}}>Exécuter</button> </div> ) }}exporter les enfants par défaut ;
5. Obtenez les propriétés et les méthodes des sous-composants via les références dans le composant parent
importer React depuis 'react'; importer des enfants depuis './Children'; class Up extends React.Component { constructor(props){ super(props); this.state = { } } clickButton = () => { console.log (this.refs.children); } render(){ console.log("render"); return( <div> up <Children ref="children" msg="test"/> <button onClick={this.clickButton }>cliquez</button> </div> ) }}export default Up;``````jsimport React from 'react';class Children extends React.Component{ constructor(props){ super(props); state = { title: "Subcomponent" } } runChildren = () => { } render(){ return ( <div> Children <br /> </div> ) }}export default Children;````
