Exemple détaillé de React transmettant le nom de la classe au composant enfant via le composant parent

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur. Cet article présente principalement la méthode par laquelle React transmet le nom de la classe au composant enfant via le composant parent. J'espère que cela pourra aider tout le monde à mieux comprendre.

Tutoriel React

React est une bibliothèque JAVASCRIPT permettant de créer des interfaces utilisateur.
React est principalement utilisé pour créer une interface utilisateur. Beaucoup de gens pensent que React est le V (vue) de MVC.
React est né d'un projet interne à Facebook, utilisé pour créer le site Web d'Instagram et a été open source en mai 2013.
React a des performances élevées et une logique de code très simple. De plus en plus de gens ont commencé à y prêter attention et à l'utiliser.

Fonctionnalités de React

1. Conception déclarative -React adopte un paradigme déclaratif, qui peut facilement décrire les applications.
2. Efficace −React minimise l'interaction avec le DOM en simulant le DOM.
3. Flexible −React fonctionne bien avec les bibliothèques ou les frameworks connus.
4.JSX - JSX est une extension de la syntaxe JavaScript. JSX n'est pas requis pour le développement de React, mais il est recommandé.
5. Composants - La création de composants via React facilite la réutilisation du code et peut être bien appliquée dans le développement de grands projets.
6. Flux de données de réponse unidirectionnelle - React implémente un flux de données de réponse unidirectionnel, réduisant ainsi le code en double, c'est pourquoi il est plus simple que la liaison de données traditionnelle.

1. Méthode de transmission des noms de classe aux composants enfants via les composants parents (ligne 19)

2 Appliquer certains noms de classe via différentes valeurs de statut (ligne 22)

 import React from 'react'
import './style.css'
class PageTitle extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      timeType:0
    }
  }
  handleClick(timeType){
    this.setState({
      timeType:timeType
    });
    this.props.handle(timeType+1);
  }
  render() {
    const {title,dataList} = this.props;
    return (
     <h3 className={this.props.clasName+" cp_title"}>{title}
       <p className="floatR">
         {dataList.map((item,index) => {
           return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
         })}
       </p>
     </h3>
    )
  }
}
export default PageTitle;

Après avoir lu cet article, vous devriez avoir une compréhension plus approfondie des connaissances de React.

Recommandations associées :

Explication détaillée des composants contrôlés et non contrôlés dans React

Quelles sont les façons d'écrire des composants dans React

Comment implémenter la sélection unique, la sélection multiple et la sélection inverse dans les formulaires dans ReactJS

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!