React
Props in React

Opmerkingen

Invoering

props worden gebruikt om gegevens en methoden van een oudercomponent door te geven aan een onderliggende component.

Interessante dingen over props

1. Ze zijn onveranderlijk.
2. Ze stellen ons in staat om herbruikbare componenten te maken.

Basis voorbeeld

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

Zoals je in het voorbeeld kunt zien, kunnen we dankzij props herbruikbare componenten maken.

Standaard rekwisieten

defaultProps kunt u set default of fallback, waarden voor uw component props . defaultProps zijn handig wanneer u componenten uit verschillende weergaven roept met vaste props, maar in sommige weergaven moet u een andere waarde doorgeven.

Syntaxis

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

Het resultaat van getDefaultProps() of defaultProps wordt in de cache opgeslagen en gebruikt om ervoor te zorgen dat this.props.randomObject een waarde heeft als deze niet is opgegeven door de bovenliggende component.

PropTypes

propTypes kunt u specificeren welke props uw component nodig heeft en het type dat ze zouden moeten zijn. Uw component zal werken zonder propTypes , maar het is een goede gewoonte om deze te definiëren omdat het uw component leesbaarder maakt, als documentatie dient voor andere ontwikkelaars die uw component lezen, en tijdens de ontwikkeling waarschuwt React u als u probeert om stel een prop in die van een ander type is dan de definitie die u ervoor hebt ingesteld.

Sommige primitieve propTypes en algemeen bruikbare propTypes zijn -

  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

Als u is isRequired aan een propType moet die prop worden propType tijdens het maken van de instantie van die component. Als u niet de vereiste propTypes kan er geen componentinstantie worden gemaakt.

Syntaxis

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

Meer complexe rekwisietenvalidatie

Op dezelfde manier kunt u met PropTypes een complexere validatie opgeven

Een object valideren

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

Valideren op array van objecten

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

Props doorgeven met een spreidoperator

In plaats van

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

Wanneer elke eigenschap moet worden doorgegeven als een enkele propwaarde, kunt u de spreadoperator gebruiken ... ondersteund voor arrays in ES6 om al uw waarden door te geven. De component ziet er nu zo uit.

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

Vergeet niet dat de eigenschappen van het object dat u doorgeeft, worden gekopieerd naar de rekwisieten van de component.

De volgorde is belangrijk. Latere attributen vervangen de vorige.

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

Een ander geval is dat je de spread-operator ook kunt gebruiken om alleen delen van rekwisieten door te geven aan onderliggende componenten, dan kun je de destructureringssyntaxis van rekwisieten opnieuw gebruiken.

Het is erg handig wanneer componenten voor kinderen veel rekwisieten nodig hebben maar ze niet één voor één willen passeren.

 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 en component samenstelling

De "onderliggende" componenten van een component zijn beschikbaar op een speciale prop, props.children . Deze prop is erg handig voor "Compositing" -componenten samen en kan JSX-opmaak intuïtiever of reflectiever maken voor de beoogde uiteindelijke structuur van de DOM:

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

Hiermee kunnen we een willekeurig aantal subelementen opnemen wanneer we de component later gebruiken:

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

Props.children kunnen ook worden gemanipuleerd door de component. Omdat props.children al dan niet een array is , biedt React hulpprogramma's voor hen als React.Children . Overweeg in het vorige voorbeeld of we elke alinea in een eigen <section> -element hadden willen plaatsen:

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>
    );
}

Let op het gebruik van React.cloneElement om de rekwisieten uit de onderliggende tag <p> te verwijderen - omdat rekwisieten onveranderlijk zijn, kunnen deze waarden niet rechtstreeks worden gewijzigd. In plaats daarvan moet een kloon zonder deze rekwisieten worden gebruikt.

Houd er bovendien bij het toevoegen van elementen in lussen rekening mee hoe React kinderen in overeenstemming brengt tijdens een rerender en overweeg sterk om een wereldwijd unieke key op onderliggende elementen in een lus toe te voegen.

Detectie van het type componenten voor kinderen

Soms is het erg handig om het type onderliggende component te kennen wanneer je deze doorloopt. Om de onderliggende componenten te doorlopen, kunt u de functie React Children.map gebruiken:

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

Het onderliggende object onthult de eigenschap type die u kunt vergelijken met een specifieke component.