Preguntas de la entrevista-React (7): comunicación del componente React

En el desarrollo de React, la comunicación de componentes es un concepto central, que permite que diferentes componentes trabajen juntos para lograr interacciones y transferencias de datos más complejas. Métodos de comunicación de componentes comunes: de padre a hijo y de hijo a padre

1. Comunicación de padre a hijo

Pasar datos de componentes principales a componentes secundarios es la forma de comunicación más común en React. Este enfoque es adecuado para pasar datos de un componente de nivel superior a sus componentes secundarios directos.

Método de implementación:
pasar datos agregando propiedades (propiedades) en los subcomponentes.

Ejemplo:

• componente principal

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

• Subconjunto

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

En el ejemplo anterior, los datos se pasan ParentComponenta través messagedel atributo ChildComponenty el componente secundario puede this.propsacceder a estos datos y representarlos.

2. Comunicación de hijo a padre

Pasar datos o activar eventos de componentes secundarios a componentes principales es otra forma común de comunicación. Este enfoque es adecuado para situaciones en las que un componente secundario necesita pasar datos a su componente principal.

Método de implementación:
al definir una función de devolución de llamada dentro del subcomponente y luego pasar esta función de devolución de llamada al subcomponente, el subcomponente llama a esta función en el momento adecuado para transferir datos.

Ejemplo:

• componente principal

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)} />;
  }
}

• Subconjunto

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>;
  }
}

En el ejemplo anterior, se pasa una función de devolución de llamada al componente principal ChildComponentmediante accesorios. onDataReadyCuando se hace clic en el botón dentro del componente secundario, se llamará a esta función de devolución de llamada y los datos se pasarán al componente principal.

3. Ejemplos de aplicación

A continuación se utiliza un ejemplo de aplicación práctica para demostrar la aplicación de los métodos de comunicación de padre a hijo y de hijo a padre.

• componente principal

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>
    );
  }
}

• Subconjunto

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>
    )
  }
}

En el ejemplo anterior, se logra un efecto de cambio de pestaña: el componente principal pasa la información al componente secundario, y el componente secundario activa la devolución de llamada para pasar el subíndice de la pestaña en la que se hizo clic para lograr el efecto de cambio.