React
Puntelli in React

Osservazioni

introduzione

props sono usati per passare dati e metodi da un componente genitore a un componente figlio.

Cose interessanti su props di props

1. Sono immutabili.
2. Ci permettono di creare componenti riutilizzabili.

Esempio di 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>
  }
}

Come puoi vedere nell'esempio, grazie agli props di props possiamo creare componenti riutilizzabili.

Oggetti di scena di default

defaultProps consente di impostare i valori di default, o fallback, per i propri props . defaultProps sono utili quando si chiamano componenti da viste diverse con oggetti fissi, ma in alcune viste è necessario passare un valore diverso.

Sintassi

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: {},
        ...
    };
}

Il risultato di getDefaultProps() o defaultProps verrà memorizzato nella cache e utilizzato per garantire che this.props.randomObject abbia un valore se non è stato specificato dal componente principale.

PropTypes

propTypes consente di specificare che cosa props i vostri bisogni dei componenti e il tipo dovrebbero essere. Il tuo componente funzionerà senza impostare propTypes , ma è buona norma definirlo in quanto renderà il tuo componente più leggibile, fungerà da documentazione per gli altri sviluppatori che stanno leggendo il tuo componente, e durante lo sviluppo, React ti avviserà se provi a imposta un oggetto di scena diverso dalla definizione che hai impostato per esso.

Alcune primitive propTypes e comunemente utilizzabili propTypes sono -

  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

Se si allega isRequired a qualsiasi propType allora quel puntello deve essere fornito durante la creazione dell'istanza di quel componente. Se non si forniscono i propTypes richiesti , l'istanza del componente non può essere creata.

Sintassi

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

Convalida dei puntelli più complessa

Allo stesso modo, PropTypes ti consente di specificare una convalida più complessa

Convalidare un oggetto

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

Convalida sulla matrice di oggetti

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

Passando giù puntelli usando l'operatore di spread

Invece di

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

Dove ogni proprietà deve essere passata come un singolo valore prop è possibile utilizzare l'operatore di diffusione ... supportato per gli array in ES6 per trasmettere tutti i valori. Il componente sarà ora simile a questo.

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

Ricorda che le proprietà dell'oggetto che si passano vengono copiate sui puntelli del componente.

L'ordine è importante Gli attributi successivi sostituiscono quelli precedenti.

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

Un altro caso è che puoi anche usare l'operatore di spread per passare solo parti di oggetti di scena ai componenti figli, quindi puoi usare di nuovo la sintassi destrutturante dai puntelli.

È molto utile quando i componenti dei bambini hanno bisogno di molti oggetti di scena ma non vogliono passarli uno per uno.

 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'

Oggetti di scena e composizione dei componenti

I componenti "figlio" di un componente sono disponibili su un puntello speciale, props.children . Questo puntello è molto utile per i componenti "Compositing" e può rendere il markup JSX più intuitivo o riflettente della struttura finale del DOM:

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

Che ci consente di includere un numero arbitrario di sottoelementi quando utilizzi il componente in un secondo momento:

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

Props.children può anche essere manipolato dal componente. Poiché props.children può o non può essere un array , React fornisce funzioni di utilità come React.Children . Considera nell'esempio precedente se avessimo voluto racchiudere ogni paragrafo nel proprio elemento <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>
    );
}

Nota l'uso di React.cloneElement per rimuovere gli oggetti di scena dal tag <p> secondario - perché gli oggetti di scena sono immutabili, questi valori non possono essere modificati direttamente. Invece, un clone senza questi oggetti di scena deve essere usato.

Inoltre, quando si aggiungono elementi nei loop, tenere presente che React riconcilia i bambini durante un rerender e considerare seriamente l' inclusione di un puntello key univoco a livello globale sugli elementi figlio aggiunti in un ciclo.

Rilevazione del tipo di componenti per bambini

A volte è davvero utile conoscere il tipo di componente figlio durante l'iterazione attraverso di essi. Per iterare attraverso i componenti figli è possibile utilizzare la funzione React Children.map util:

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

L'oggetto figlio espone la proprietà type che è possibile confrontare con un componente specifico.