Perguntas da entrevista-React (7): Comunicação do componente React

No desenvolvimento do React, a comunicação de componentes é um conceito central, que permite que diferentes componentes trabalhem juntos para obter interações e transferência de dados mais complexas. Métodos de comunicação de componentes comuns: pai para filho e filho para pai

1. Método de comunicação de pai para filho

Passar dados de componentes pais para componentes filhos é a forma mais comum de comunicação no React. Esta abordagem é adequada para passar dados de um componente de nível superior para seus componentes filhos diretos.

Método de implementação:
passe dados adicionando propriedades (adereços) em subcomponentes.

Exemplo:

• componente pai

import React from 'react';
class ParentComponent extends React.Component {
  render() {
    const message = "Hello from parent!";
    return <ChildComponent message={message} />;
  }
}

• Submontagem

import React from 'react';
class ChildComponent extends React.Component {
  render() {
    return <p>{this.props.message}</p>;
  }
}

No exemplo acima, os dados são passados ParentComponent​​através messagedo atributo ChildComponente o componente filho pode this.propsacessar esses dados e renderizá-los.

2. Comunicação de filho para pai

Passar dados ou disparar eventos de componentes filhos para componentes pais é outra forma comum de comunicação. Essa abordagem é adequada para situações em que um componente filho precisa passar dados para seu componente pai.

Método de implementação:
Ao definir uma função de retorno de chamada dentro do subcomponente e, em seguida, passar essa função de retorno de chamada para o subcomponente, o subcomponente chama essa função em um momento apropriado para transferir dados.

Exemplo:

• componente pai

import React from 'react';
class ParentComponent extends React.Component {
  handleDataFromChild(data) {
    console.log("Data from child:", data);
  };

  render() {
    return <ChildComponent onDataReady={data => this.handleDataFromChild(data)} />;
  }
}

• Submontagem

import React from 'react';
class ChildComponent extends React.Component {
  sendDataToParent() {
    const data = "Data from child!";
    this.props.onDataReady(data);
  };

  render() {
    return <button onClick={() => this.sendDataToParent()}>Send Data</button>;
  }
}

No exemplo acima, uma função de retorno de chamada é passada para o componente pai ChildComponentpor meio de adereços. onDataReadyQuando o botão dentro do componente filho for clicado, esta função de retorno de chamada será chamada e os dados serão passados ​​para o componente pai.

3. Exemplos de aplicação

A seguir é utilizado um exemplo de aplicação prática para demonstrar a aplicação dos métodos de comunicação de pai para filho e de filho para pai.

• componente pai

import React, { Component } from 'react'
class ParentComponent extends Component {
  constructor() {
    super()
    this.state = {
      tabs: ["首页", "热门", "我的"],
      curIndex: 0
    }
  }
  tabClick(ind) {
    this.setState({ curIndex: ind })
  }
  render() {
    const {tabs, curIndex} = this.state
    return (
      <div className="App">
        <ChildComponent tabs={tabs} tabClick={(ind) => this.tabClick(ind)} />
        <h2>{tabs[curIndex]}</h2>
      </div>
    );
  }
}

• Submontagem

import React, { Component } from 'react'
class ChildComponent extends Component {
  constructor() {
    super() 
    this.state = {
      currentIndex: 0
    }
  }
  changeTab(ind) {
    this.setState({ currentIndex: ind })
    this.props.tabClick(ind)
  }
  render() {
    const { tabs } = this.props
    const { currentIndex } = this.state
    return (
      <div>
        <ul className='tabUl'>
          {
            tabs.map((item, ind) => {
              return(
                <li 
                  key={item} 
                  className={`${currentIndex === ind ? "active" : ''}`}
                  onClick={e => this.changeTab(ind)}
                >
                  <span>{item}</span>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

No exemplo acima, um efeito de troca de guia é realizado. O componente pai passa as informações para o componente filho, e o componente filho aciona o retorno de chamada para passar o subscrito da guia clicada para realizar o efeito de troca.