Une brève introduction aux méthodes de communication entre les composants React

Cet article présente principalement l'explication détaillée de la communication des composants React dans le didacticiel de développement de React. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Après avoir étudié React au cours des deux derniers jours, j'ai l'impression qu'il y a beaucoup de connaissances sur la communication des composants et c'est très important, j'ajouterai donc quelques notes. aujourd'hui.

Communication composante parent-enfant

Moyens de communication

Il s'agit de la méthode de communication la plus courante. Le composant parent n'a besoin que de transmettre les accessoires requis par le composant enfant au composant enfant, et le composant enfant peut les utiliser directement via this.props.

Contenu de la communication

Il convient également de mentionner comment définir correctement les accessoires des sous-composants si vous souhaitez concevoir le sous-composant. en un composant universel complexe avec une forte convivialité, il faut abstraire les parties réutilisables. Les accessoires abstraits peuvent être formés en deux types, l'un est une variable simple et l'autre est abstrait pour traiter certaines fonctions logiques.

Prenons le composant Header comme exemple

//HeaderBar.jsx 子组件

import React, { Component } from 'react';

class Header extends Component {
  constructor() {
    super();
    this.handleClick = (e) => {
      console.log(this)
    }
  }

  renderLeftComponent() {

    let leftDOM = {};
    if (this.props.renderLeftComponent) {
      return this.props.renderLeftComponent();
    }

    if (this.props.showBack) {
      let backFunc = this.props.onBack || this.goBack;
      leftDOM = (<a onClick={backFunc.bind(this)}><i className="icon left-icon icon-left-arrow"></i></a>);
    }
    return leftDOM;
  }
  

  renderRightComponent() {
    if (this.props.renderRightComponent) {
      return this.props.renderRightComponent();
    }
  }

  goBack() {
    alert("返回上一页")
  }

  render() {
    return (
      <header className="header-bar">
        {this.renderLeftComponent()}
        <span>{this.props.title || &#39;滴滴&#39;}</span>
        {this.renderRightComponent()}
      </header>
    );
  }
}

export default Header;

//父亲组件部分代码App.jsx
import HeaderBar from "./components/Header";

let leftIcon = function () {
 return (
  <a><i className="icon left-icon icon-left-haha"></i>左边按钮</a>
 )
}
class App extends Component {

 render() {
  return (
   <p className="App">
    <HeaderBar title="滴滴打车" renderLeftComponent={leftIcon} />
   </p>
  );
 }
}

Composant enfant-parent communication

Le moyen de communication du composant parent-enfant passe par les accessoires du composant enfant. Le composant enfant utilise le composant parent. Le composant enfant-parent communique via le parent. composant utilisant le composant enfant. Deux méthodes à comprendre pour l'instant

Utiliser la fonction de rappel

Le composant parent transmet une méthode au composant enfant via des accessoires, et le composant enfant transmet les données du composant enfant via la méthode props Passé au composant parent

Utiliser ref

Le composant parent appelle les propriétés de l'enfant composant via refs

Communication des composants inter-niveaux

Dans React, lorsqu'une propriété est utilisée à plusieurs reprises et existe dans plusieurs sous- composants, à l'heure actuelle, si nous passons les accessoires niveau par niveau, nous pouvons obtenir beaucoup d'accès hiérarchique, mais un problème comme celui-ci est que cela rendra le code très confus. Dans React China, nous pouvons également utiliser le contexte pour établir la communication entre les composants. composants parent et enfant à plusieurs niveaux

En réaction, le contexte est appelé Wormhole

// Component 父级
class parentComponent extends React.Component {
  
  // add the following property
  static childContextTypes = {
    color: React.PropTypes.string
  }
  
  // 添加下面方法
  getChildContext() {
    return {
      color: "#f00"
    }
  }
  
  render() {
    <p>
      <Child1 />
    </p>
  }
}


// Component Child1
class Child1 extends React.Component {
  // 添加下面属性
  static contextTypes = {
    color: React.PropTypes.string
  }
  
  render() {
    <p>{this.context.color}</p>
  }
}

Idem- communication des composants de niveau

Entre composants de même niveau La communication doit toujours passer par le composant parent comme intermédiaire En utilisant plusieurs communications de composants parent-enfant, le projet met les données. qui doit être transféré dans l'état du composant parent, et il peut être automatiquement transféré de manière synchrone lorsqu'il change.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!