En las llamadas mutuas entre componentes de reacción, la persona que llama se denomina componente principal y la persona que llama se denomina componente secundario. Se pueden pasar valores entre los componentes padre e hijo: 1. Cuando un componente padre pasa un valor a un componente hijo, el valor que se pasará primero se pasa al componente hijo y luego, en el componente hijo, se utilizan accesorios para recibir el valor pasado por el componente principal; 2. Componente secundario Al pasar valores al componente principal, debe pasarlos al componente principal a través del método de activación.
El entorno operativo de este tutorial: sistema Windows7, versión reaccionar18, computadora Dell G3.
1. Componentes en reaccionar
El componente de reacción es una etiqueta no html autodefinida. Se estipula que la primera letra del componente de reacción está en mayúscula:
La aplicación de clase extiende el componente{}<Aplicación />
2. Componentes padre-hijo
Cuando los componentes se llaman entre sí, la persona que llama se llama componente principal y la persona que llama se llama componente secundario:
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende React.Component { constructor(props){ super(props) this.state = { } } render(){ console.log("render); "); return( <div> up <Children /> </div> ) }}exportar valor predeterminado Up;importar React from 'react';class Children extends React.Component{ constructor(props){ super(props); this. estado = { } } render(){ return ( <div> Hijos </div> ) }}exportar hijos predeterminados;
3. El componente principal pasa valor al componente secundario
Los componentes principales pasan valores a los componentes secundarios mediante accesorios. Cuando un componente principal pasa un valor a un componente secundario, el valor que se pasará se pasa primero al componente secundario y luego, en el componente secundario, se utilizan accesorios para recibir el valor pasado por el componente principal.
El componente principal define una propiedad al llamar al componente secundario:
<Children msg="El componente principal pasa valor al componente secundario" />
Este valor de mensaje estará vinculado al atributo de accesorios del subcomponente, y el subcomponente se puede usar directamente:
este.props.msg
Los componentes principales pueden pasar valores y métodos a componentes, e incluso pueden pasarse ellos mismos a componentes secundarios.
3.1 Valor de paso
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende React.Component { constructor(props){ super(props) this.state = { } } render(){ console.log("render); "); return( <div> up <Children msg="El componente principal pasa valor al componente secundario" /> </div> ) }}exportar valor predeterminado Up;importar React from 'react';class Children extiende React.Component{ constructor (props){ super(props); this.state = { } } render(){ return ( <div> Hijos <br /> {this.props.msg} </div> ) }}exportar hijos predeterminados;
3.2 Método de transmisión
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende React.Component { constructor(props){ super(props) this.state = { } } run = () => { console.log; ("método de ejecución del componente principal"); } render(){ console.log("render"); return( <div> up <Children run={this.run} /> </div> ) }}exportar valor predeterminado Arriba ;importar React desde 'react';class Children extiende React.Component{ constructor(props){ super(props); this.state = { } } run = () => { this.props.run(); ){ return ( <div> Hijos <br /> <button onClick={this.run}>Ejecutar</button> </div> ) }}exportar hijos predeterminados;
3.3 Pasar el componente principal al componente secundario
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende React.Component { constructor(props){ super(props) this.state = { } } run = () => { console.log; ("método de ejecución del componente principal"); } render(){ console.log("render"); return( <div> up <Children msg={this}/> </div> ) }}exportar valor predeterminado Arriba;importar Reaccionar desde 'react';class Children extiende React.Component{ constructor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); (){ return ( <div> Hijos <br /> <button onClick={this.run}>Ejecutar</button> </div> ) }}exportar hijos predeterminados;
4. El subcomponente pasa valor al componente principal
El componente secundario pasa el valor al componente principal a través del método de activación.
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende 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> ) }}exportar valor predeterminado Arriba; importar Reaccionar desde 'react';class Children extiende React.Component{ constructor(props){ super(props); this.state = { } } render(){ return ( <div> Children <br /> <button onClick={() = > {this.props.upFun("datos del componente secundario")}}>Ejecutar</button> </div> ) }}exportar niños predeterminados;
5. Obtenga propiedades y métodos de subcomponentes a través de referencias en el componente principal.
importar React desde 'react'; importar Niños desde './Children'; clase Arriba extiende React.Component { constructor(props){ super(props); this.state = { } } clickButton = () => { console.log (this.refs.children); } render(){ console.log("render"); return( <div> arriba <Niños ref="children" msg="test"/> <button onClick={this.clickButton }>hacer clic</button> </div> ) }}exportar valor predeterminado Arriba;``````jsimport Reaccionar desde 'react';class Children extiende React.Component{ constructor(props){ super(props); estado = { título: "Subcomponente" } } runChildren = () => { } render(){ return ( <div> Hijos <br /> </div> ) }}exportar hijos predeterminados;````
