Quais são os componentes pai-filho em reação

Nas chamadas mútuas entre componentes react, o chamador é chamado de componente pai e o receptor é chamado de componente filho. Os valores podem ser passados ​​entre componentes pai e filho: 1. Quando um componente pai passa um valor para um componente filho, o valor a ser passado é primeiro passado para o componente filho e, em seguida, no componente filho, os adereços são usados ​​para receber o valor passado pelo componente pai 2. Componente filho Ao passar valores para o componente pai, você precisa passá-los para o componente pai por meio do método trigger.

O ambiente operacional deste tutorial: sistema Windows7, versão react18, computador Dell G3.

1. Componentes em React

O componente react é uma tag não html autodefinida. É estipulado que a primeira letra do componente react seja maiúscula:

classe App estende componente{}<App />

2. Componentes pai-filho

Quando os componentes chamam uns aos outros, o chamador é chamado de componente pai e o receptor é chamado de componente filho:

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); this.state = { } } render(){ console.log("renderizar" "); return( <div> up <Children /> </div> ) }}exportar padrão Up;importar React de 'react';class Children extends React.Component{ construtor(props){ super(props); this. state = { } } render(){ return ( <div> Filhos </div> ) }}exportar padrão Filhos;

3. Componente pai passa valor para componente filho

Os componentes pais passam valores para os componentes filhos usando adereços. Quando um componente pai passa um valor para um componente filho, o valor a ser passado é primeiro passado para o componente filho e, em seguida, no componente filho, os adereços são usados ​​para receber o valor passado pelo componente pai.

O componente pai define uma propriedade ao chamar o componente filho:

<Children msg="Componente pai passa valor para componente filho" />

Esta mensagem de valor será vinculada ao atributo props do subcomponente, e o subcomponente pode ser usado diretamente:

isto.props.msg

Os componentes pais podem passar valores e métodos para componentes e podem até mesmo passar para componentes filhos.

3.1 Valor de passagem

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); this.state = { } } render(){ console.log("renderizar" "); return( <div> up <Children msg="O componente pai passa o valor para o componente filho" /> </div> ) }}exportar padrão Up;importar React de 'react';class Filhos estende React.Component{ construtor (props){ super(props); this.state = { } } render(){ return ( <div> Filhos <br /> {this.props.msg} </div> ) }}exportar filho padrão;

3.2 Método de transmissão

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); ("método de execução do componente pai"); } render(){ console.log("render"); ;importar React de 'react';class Filhos estende React.Component{ construtor(props){ super(props); this.state = { } } run = () => { this.props.run(); ){ return ( <div> Filhos <br /> <button onClick={this.run}>Executar</button> </div> ) }}exportar Filhos padrão;

3.3 Passar componente pai para componente filho

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); ("método de execução do componente pai"); } render(){ console.log("render"); Reagir de 'react';class Filhos estende React.Component{ construtor(props){ super(props); this.state = { } } run = () => { console.log(this.props.msg); (){ return ( <div> Filhos <br /> <button onClick={this.run}>Executar</button> </div> ) }}exportar Filhos padrão;

4. O subcomponente passa valor para o componente pai

O componente filho passa o valor para o componente pai por meio do método trigger.

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); this.state = { } } getChildrenData = (data) => { console. log(data); } render(){ console.log("render return( <div> up <Children upFun={this.getChildrenData}/> </div> ) }}exportar padrão Up; importar React de 'react';class Filhos estende React.Component{ construtor(props){ super(props); this.state = { } } render(){ return ( <div> Filhos <br /> <button onClick={() = > {this.props.upFun("dados do componente filho")}}>Executar</button> </div> ) }}exportar filhos padrão;

5. Obtenha propriedades e métodos de subcomponentes por meio de referências no componente pai

importar React de 'react';importar filhos de './Children';class Up estende React.Component { construtor(props){ super(props); (this.refs.children); } render(){ console.log("render"); return( <div> up <Children ref="children" msg="test"/> <button onClick={this.clickButton }>click</button> </div> ) }}exportar padrão Up;``````jsimport React from 'react';class Filhos estende React.Component{ construtor(props){ super(props this); state = { title: "Subcomponent" } } runChildren = () => { } render(){ return ( <div> Filhos <br /> </div> ) }}exportar Filhos padrão;````