React
Rekwizyty w reakcji

Uwagi

Wprowadzenie

props służą do przekazywania danych i metod ze składnika nadrzędnego do elementu podrzędnego.

Ciekawe rzeczy na temat props

1. Są niezmienne.
2. Pozwalają nam tworzyć komponenty wielokrotnego użytku.

Podstawowy przykład

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

Jak widać na przykładzie, dzięki props możemy tworzyć elementy wielokrotnego użytku.

Domyślne rekwizyty

defaultProps pozwala ustawić domyślne lub zastępcze wartości props komponentów. defaultProps są przydatne, gdy wywołujesz komponenty z różnych widoków za pomocą stałych rekwizytów, ale w niektórych widokach musisz przekazać inną wartość.

Składnia

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

Wynik getDefaultProps() lub defaultProps zostanie zbuforowany i użyty w celu zapewnienia, że this.props.randomObject będzie miał wartość, jeśli nie zostanie określona przez komponent nadrzędny.

PropTypes

propTypes pozwala określić, jakie props potrzebuje twój komponent i jaki powinien być typ. Twój komponent będzie działał bez ustawiania propTypes , ale dobrą praktyką jest ich zdefiniowanie, ponieważ sprawi, że będzie on bardziej czytelny, będzie działał jako dokumentacja dla innych programistów, którzy czytają twój komponent, a podczas programowania React ostrzeże Cię, jeśli spróbujesz ustaw rekwizyt, który jest innym typem niż definicja, którą dla niego ustawiłeś.

Niektóre prymitywne propTypes i często propTypes to

  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

Jeśli isRequired do dowolnego typu propType wówczas ten propType musi zostać propType podczas tworzenia instancji tego komponentu. Jeśli nie podasz wymaganych propTypes nie będzie można utworzyć instancji komponentu.

Składnia

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

Bardziej złożone sprawdzanie poprawności rekwizytów

W ten sam sposób PropTypes pozwala określić bardziej złożone sprawdzanie poprawności

Sprawdzanie poprawności obiektu

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

Sprawdzanie poprawności na tablicy obiektów

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

Przekazywanie rekwizytów za pomocą operatora rozrzutu

Zamiast

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

Tam, gdzie każda właściwość musi być przekazana jako pojedyncza wartość prop, możesz użyć operatora rozkładania ... obsługiwanego dla tablic w ES6, aby przekazać wszystkie swoje wartości. Komponent będzie teraz wyglądał następująco.

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

Pamiętaj, że właściwości przekazywanego obiektu są kopiowane na rekwizyty komponentu.

Kolejność jest ważna. Późniejsze atrybuty zastępują poprzednie.

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

Innym przypadkiem jest to, że możesz również użyć operatora rozprzestrzeniania, aby przekazać tylko części rekwizytów do komponentów potomnych, a następnie możesz ponownie użyć składni destrukcyjnej z rekwizytów.

Jest to bardzo przydatne, gdy dzieci potrzebują wielu rekwizytów, ale nie chcą ich przekazywać jeden po drugim.

 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 dzieci i skład składników

Komponenty „potomne” komponentu są dostępne na specjalnej props.children , props.children . Ten rekwizyt jest bardzo przydatny do łączenia komponentów i może sprawić, że znaczniki JSX są bardziej intuicyjne lub odzwierciedlają zamierzoną końcową strukturę DOM:

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

Co pozwala nam dołączyć dowolną liczbę podelementów podczas późniejszego używania komponentu:

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

Komponent może również manipulować obiektami Props.children. Ponieważ props.children może, ale nie musi być tablicą , React udostępnia dla nich funkcje narzędziowe jako React.Children . Rozważ w poprzednim przykładzie, czy chcieliśmy zawinąć każdy akapit we własny element <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>
    );
}

Zwróć uwagę na użycie React.cloneElement do usunięcia rekwizytów ze <p> potomnego <p> - ponieważ rekwizyty są niezmienne, tych wartości nie można zmienić bezpośrednio. Zamiast tego należy użyć klonu bez tych rekwizytów.

Ponadto, dodając elementy w pętlach, pamiętaj o tym, jak React uzgadnia dzieci podczas ponownego wyrenderowania , i mocno zastanów się nad włączeniem unikatowego na całym świecie key rekwizytu do elementów potomnych dodanych w pętli.

Wykrywanie typu komponentów potomnych

Czasami naprawdę warto znać typ elementu potomnego podczas iteracji przez nie. Aby przejść do kolejnych elementów potomnych, możesz użyć funkcji React Children.map :

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

Obiekt podrzędny udostępnia właściwość type którą można porównać do określonego komponentu.