React
Les accessoires en réaction

Remarques

introduction

props sont utilisées pour transmettre des données et des méthodes d'un composant parent à un composant enfant.

Des choses intéressantes sur les props

1. Ils sont immuables.
2. Ils nous permettent de créer des composants réutilisables.

Exemple de base

class Parent extends React.Component{
  doSomething(){
     console.log("Parent component");
  }
  render() {
    return <div>
         <Child 
           text="This is the child number 1"
           title="Title 1" 
           onClick={this.doSomething} />
         <Child 
           text="This is the child number 2"
           title="Title 2" 
           onClick={this.doSomething} />
      </div>
  }
}

class Child extends React.Component{
  render() {
    return <div>
       <h1>{this.props.title}</h1>
       <h2>{this.props.text}</h2>
      </div>
  }
}

Comme vous pouvez le voir dans l'exemple, grâce aux props nous pouvons créer des composants réutilisables.

Accessoires par défaut

defaultProps vous permet de définir des valeurs par défaut ou de secours pour vos props composant. defaultProps est utile lorsque vous appelez des composants de différentes vues avec des objets fixes, mais dans certaines vues, vous devez transmettre des valeurs différentes.

Syntaxe

ES5

var MyClass = React.createClass({
  getDefaultProps: function() {
    return {
      randomObject: {},
      ...
    };
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.defaultProps = {
    randomObject: {},
    ...
}

ES7

class MyClass extends React.Component {  
    static defaultProps = {
        randomObject: {},
        ...
    };
}

Le résultat de getDefaultProps() ou defaultProps sera mis en cache et utilisé pour garantir que this.props.randomObject aura une valeur s'il n'était pas spécifié par le composant parent.

PropTypes

propTypes vous permet de spécifier les props votre composant a besoin et le type qu'il devrait être. Votre composant fonctionnera sans définir propTypes , mais il est propTypes de le définir car il rendra votre composant plus lisible, servira de documentation à d’autres développeurs qui lisent votre composant, et pendant le développement, React vous avertira si vous essayez de le faire. définir un accessoire qui est un type différent de la définition que vous avez définie pour lui.

Certains primitifs propTypes et souvent utilisables propTypes sont -

  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol

Si vous isRequired à un propType ce prop doit être fourni lors de la création de l'instance de ce composant. Si vous ne fournissez pas les propTypes requis , l'instance de composant ne peut pas être créée.

Syntaxe

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

Validation des accessoires plus complexes

De même, PropTypes vous permet de spécifier une validation plus complexe

Valider un objet

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

Validation sur un tableau d'objets

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...

Faire passer des accessoires à l'aide d'un opérateur de répartition

Au lieu de

var component = <Component foo={this.props.x} bar={this.props.y} />;

Lorsque chaque propriété doit être transmise en tant que valeur unique, vous pouvez utiliser l'opérateur de propagation ... pris en charge pour les baies dans ES6 afin de transmettre toutes vos valeurs. Le composant va maintenant ressembler à ceci.

var component = <Component {...props} />;

Rappelez-vous que les propriétés de l'objet que vous transmettez sont copiées sur les accessoires du composant.

La commande est importante. Les attributs ultérieurs remplacent les précédents.

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

Un autre cas est que vous pouvez également utiliser un opérateur de propagation pour ne transmettre que des parties des accessoires aux composants enfants, puis vous pouvez utiliser à nouveau la syntaxe de déstructuration des accessoires.

C'est très utile lorsque les composants enfants ont besoin de beaucoup d'accessoires, mais ne veulent pas les dépasser un par un.

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'

Props.children et composition des composants

Les composants "enfants" d'un composant sont disponibles sur un accessoire spécial, props.children . Ce prop est très utile pour les composants "Compositing", et peut rendre le balisage JSX plus intuitif ou refléter la structure finale prévue du DOM:

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

Ce qui nous permet d'inclure un nombre arbitraire de sous-éléments lors de l'utilisation ultérieure du composant:

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.children peut également être manipulé par le composant. Parce que props.children peut ou peut ne pas être un tableau , React fournit des fonctions utilitaires comme React.Children . Considérons dans l'exemple précédent si nous avions voulu envelopper chaque paragraphe dans son propre élément <section> :

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

Notez l'utilisation de React.cloneElement pour supprimer les objets de la <p> child <p> - car les accessoires sont immuables, ces valeurs ne peuvent pas être modifiées directement. Au lieu de cela, un clone sans ces accessoires doit être utilisé.

De plus, lors de l'ajout d'éléments dans des boucles, sachez comment React réconcilie les enfants pendant un réexamen , et pensez fortement à inclure un key unique au niveau global sur les éléments enfants ajoutés dans une boucle.

Détecter le type de composants enfants

Parfois, il est très utile de connaître le type de composant enfant lors d'une itération à travers eux. Pour parcourir les composants enfants, vous pouvez utiliser la fonction React Children.map util:

React.Children.map(this.props.children, (child) => {
  if (child.type === MyComponentType) {
    ...
  }
});

L'objet enfant expose la propriété type que vous pouvez comparer à un composant spécifique.