Réagir - ajout de la classe pour les enfants des composants

im à l'aide de réagir et j'ai un composant qui a besoin tout simplement de rendre les enfants et de leur ajouter une classe en fonction d'une condition.
Quel est le meilleur moyen de le faire?

This devrait vous aider.

OriginalL'auteur Pachu | 2016-08-30

  1. 17

    J'ai pensé à elle il ya une semaine, c'est ce que je voulais :

    export default class ContainerComponent extends React.Component {
    constructor(props) {
        super(props);

        this.modifyChildren = this.modifyChildren.bind(this);
    }

    modifyChildren(child) {
        const className = classNames(
            child.props.className,
            {...otherClassses}
        );

        const props = {
            className
        };

        return React.cloneElement(child, props);
    }
    render() {
        return (<div>
            {React.Children.map(this.props.children, child => this.modifyChildren(child))}
        </div>);
    }
}
    J'ai essayé cette solution, mais j'ai une erreur à partir de la fonction rendu, "l'enfant n'est pas défini." Si je change pour une fonction anonyme là, au lieu d'appeler une méthode de classe (ce.modifyChildren dans votre exemple), l'erreur disparaît et tout fonctionne bien. Cela fonctionne à la fois avec "fat flèche" et traditionnelle JS fonctions anonymes. Ne peut pas comprendre pourquoi il travaille pour vous et non pour moi lors de notre code est quasiment identique.
    Trouvé cet article qui peut aider les autres - apprendre.co/cours/réagir-ce-accessoires-enfants, ressemble à un v solution similaire 🙂

    OriginalL'auteur Pachu

  2. 1

    Vous pouvez passer une prop vers le bas pour l'enfant et il peut choisir à quelle classe d'appliquer (ou de passer le nom de la classe, mais c'est plus sémantique):

    <Parent contentVisible={true}>
  <Child />
</Parent>

    À votre enfant de rendu:

    const classes = [];

if (props.contentVisible)
  classes.push('visible');

<div className={classes.join(' ')} />

    OriginalL'auteur Dominic

  3. 1

    Semaines, j'avais un scénario de carousal à être mis en œuvre de réagir, rien de compliqué, juste simple basculement de la classe active. J'ai suivi cette approche, fonctionne comme un charme, mais laissez-moi savoir que c'est une bonne approche.

    {
 this.props.children.map((slide, index) => {
   return React.cloneElement(slide, {
      key: index,
      className: (this.state.currentActiveIndex === index) ?'active' : ''
   });
 })
}
    À l'aide de cloneElement est la meilleure approche de l'OMI. Vous êtes réellement en utilisant ce que l'API, il est pour.

    OriginalL'auteur Clister Dmello

  4. 0

    À l'intérieur de méthode render de votre composant:

    var childClasses = [],
    childClassNames; 
if (condition) {
    childClasses.push('my-class-name'); 
} 
childClassNames = childClasses.join(' ');

return (<div className={childClassNames}>
     .... (your component here)
</div> );
    Je ne veux pas le faire dans chacune des composantes, je veux le composant qui contient à faire les tests et ajouter la classe si nécessaire
    Pas sûr exactement ce que vous essayez d'atteindre. Votre composant parent peut calculer toutes les classes nécessaires et de les transmettre à des accessoires pour les enfants.

    OriginalL'auteur Maggie