React
Props in React

Anmärkningar

Introduktion

props används för att skicka data och metoder från en överordnad komponent till en underordnad komponent.

Intressanta saker om props

1. De är oföränderliga.
2. De tillåter oss att skapa återanvändbara komponenter.

Grundläggande exempel

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

Som du kan se i exemplet kan vi tack vare props skapa återanvändbara komponenter.

Standardrekvisita

defaultProps låter dig ställa in default eller reserv, värden för komponenten props . defaultProps är användbara när du ringer komponenter från olika vyer med fasta rekvisita, men i vissa vyer måste du skicka ett annat värde.

Syntax

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

Resultatet av getDefaultProps() eller defaultProps cachas och används för att säkerställa att this.props.randomObject har ett värde om det inte anges av överkomponenten.

PropTypes

propTypes låter dig specificera vilka props din komponent behöver och vilken typ de ska vara. Din komponent fungerar utan att ställa in propTypes , men det är bra att definiera dessa eftersom det kommer att göra din komponent mer läsbar, fungera som dokumentation till andra utvecklare som läser din komponent, och under utvecklingen kommer React att varna dig om du försöker ange en rekvisita som är en annan typ än den definition du har angett för den.

Vissa primitiva propTypes och vanligtvis användbara propTypes är -

  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

Om du bifogar isRequired till någon propType måste den propellen levereras när du skapar instansen för den komponenten. Om du inte anger de erforderliga propTypes kan komponentinstans inte skapas.

Syntax

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

Mer komplex validering av rekvisita

På samma sätt kan PropTypes ange mer komplex validering

Validera ett objekt

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

Validerar på array av objekt

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

Avsluta rekvisita med spridningsoperatör

Istället för

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

Där varje egendom måste skickas som ett enda prop-värde kan du använda spridningsoperatören ... stöds för matriser i ES6 för att skicka ned alla dina värden. Komponenten kommer nu att se ut så här.

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

Kom ihåg att egenskaperna för objektet som du skickar in kopieras till komponentens rekvisita.

Beställningen är viktig. Senare attribut åsidosätter tidigare.

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

Ett annat fall är att du också kan använda spridningsoperatören för att bara skicka delar av rekvisita till barnkomponenter, då kan du använda förstörande syntax från rekvisita igen.

Det är mycket användbart när barnkomponenter behöver massor av rekvisita men inte vill skicka dem en efter en.

 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 och komponentkomposition

"Barn" -komponenterna i en komponent finns tillgängliga på en speciell props.children , props.children . Denna rekvisita är mycket användbar för "Compositing" -komponenter tillsammans och kan göra JSX-markering mer intuitiv eller reflekterande av den avsedda slutliga strukturen för DOM:

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

Som gör att vi kan inkludera ett godtyckligt antal underelement när vi använder komponenten senare:

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

Props.children kan också manipuleras av komponenten. Eftersom props.children kanske eller inte är en matris , ger React verktygsfunktioner för dem som React.Children . Tänk i det föregående exemplet om vi hade velat inslaga varje stycke i sitt eget <section> -element:

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

Lägg märke till användningen av React.cloneElement för att ta bort rekvisita från <p> -taggen - eftersom rekvisita är obrukbara kan dessa värden inte ändras direkt. Istället måste en klon utan dessa rekvisita användas.

När du lägger till element i slingor ska du dessutom vara medveten om hur React förenar barn under en återlämnande och överväga starkt att inkludera en globalt unik key på barnelement som läggs till i en slinga.

Upptäcker typen av barnkomponenter

Ibland är det verkligen användbart att känna till vilken typ av barnkomponent som går igenom dem. För att upprepa barnkomponenterna kan du använda funktionen React Children.map util:

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

Barnet objektet exponerar type egendom som du kan jämföra med en viss komponent.