webentwicklung-frage-antwort-db.com.de

Festlegen von Standard-Requisiten für Komponenten für die React-Komponente

Ich verwende den folgenden Code, um Standard-Requisiten für eine React-Komponente festzulegen, aber es funktioniert nicht. In der render()-Methode kann ich sehen, dass die Ausgabe "undefined props" auf der Browserkonsole gedruckt wurde. Wie kann ich einen Standardwert für die Komponentenrequisiten definieren?

export default class AddAddressComponent extends Component {

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}
108
Zhao Yi

Sie haben vergessen, die Klammer Class zu schließen.

class AddAddressComponent extends React.Component {
  render() {
    let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    } else {
      console.log('defined props')
    }

    return (
      <div>rendered</div>
    )
  }
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: React.PropTypes.array.isRequired,
  provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
  <AddAddressComponent />,
  document.getElementById('app')
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

116
Serhii Baraniuk

Für diejenigen, die etwas wie babel stage-2 oder transform-class-properties verwenden :

import React, { PropTypes, Component } from 'react';

export default class ExampleComponent extends Component {
   static contextTypes = {
      // some context types
   };

   static propTypes = {
      prop1: PropTypes.object
   };

   static defaultProps = {
      prop1: { foobar: 'foobar' }
   };

   ...

}

Update

Ab Version 15.5 wurde PropTypes aus dem Hauptreaktionspaket ( link ) verschoben:

import PropTypes from 'prop-types';

Bearbeiten

Wie @johndodo zeigt, sind static-Klasseneigenschaften eigentlich kein Teil der ES7-Spezifikation, sondern werden derzeit nur von babel unterstützt. Aktualisiert, um das zu reflektieren.

81
treyhakanson

Zuerst müssen Sie Ihre Klasse von den weiteren Erweiterungen trennen, dh Sie können AddAddressComponent.defaultProps nicht innerhalb der class erweitern, statt sie nach außen zu verschieben.

Ich empfehle Ihnen auch, über den Constructor und den Lebenszyklus von React zu lesen: siehe Komponentenspezifikationen und Lebenszyklus

Hier ist was du willst:

import PropTypes from 'prop-types';

class AddAddressComponent extends React.Component {
  render() {
    let { provinceList, cityList } = this.props;
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props');
    }
  }
}

AddAddressComponent.contextTypes = {
  router: PropTypes.object.isRequired
};

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
};

AddAddressComponent.propTypes = {
  userInfo: PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

export default AddAddressComponent;
13
Ilanus

Sie können auch die Zerstörungszuordnung verwenden.

class AddAddressComponent extends React.Component {
  render() {

    const {
      province="insertDefaultValueHere1",
      city="insertDefaultValueHere2"
    } = this.props

    return (
      <div>{province}</div>
      <div>{city}</div>
    )
  }
}

Ich mag diesen Ansatz, da Sie nicht viel Code schreiben müssen.

7
Sam Henderson

verwenden Sie statische defaultProps wie:

export default class AddAddressComponent extends Component {
    static defaultProps = {
        provinceList: [],
        cityList: []
    }

render() {
   let {provinceList,cityList} = this.props
    if(cityList === undefined || provinceList === undefined){
      console.log('undefined props')
    }
    ...
}

AddAddressComponent.contextTypes = {
  router: React.PropTypes.object.isRequired
}

AddAddressComponent.defaultProps = {
  cityList: [],
  provinceList: [],
}

AddAddressComponent.propTypes = {
  userInfo: React.PropTypes.object,
  cityList: PropTypes.array.isRequired,
  provinceList: PropTypes.array.isRequired,
}

Entnommen aus: https://github.com/facebook/react-native/issues/1772

Wenn Sie die Typen überprüfen möchten, lesen Sie, wie Sie PropTypes in der Antwort von Treyhakanson oder Ilan Hasanov verwenden, oder lesen Sie die vielen Antworten in dem obigen Link.

5

Sie können die Standard-Requisiten mit dem Klassennamen wie unten gezeigt einstellen.

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

// Specifies the default values for props:
Greeting.defaultProps = {
  name: 'Stranger'
};

Sie können den von React empfohlenen Weg aus diesem link verwenden, um weitere Informationen zu erhalten

3
Rohith Murali

Für einen Funktionstyp prop können Sie den folgenden Code verwenden:

AddAddressComponent.defaultProps = {
    callBackHandler: () => {}
};

AddAddressComponent.propTypes = {
    callBackHandler: PropTypes.func,
};
1
Wolfack

Wenn Sie eine Funktionskomponente verwenden, können Sie in der Destrukturierungszuordnung Standardwerte wie folgt definieren:

export default ({ children, id="menu", side="left", image={menu} }) => {
  ...
};
0
Brian Burns