Heim > Web-Frontend > js-Tutorial > React.js-Props

React.js-Props

php中世界最好的语言
Freigeben: 2018-03-13 14:51:27
Original
1798 Leute haben es durchsucht

Dieses Mal werde ich Ihnen die Requisiten von React.js vorstellen. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente

<Son userid={123}/>
Nach dem Login kopieren
Empfangen Sie den von der übergeordneten Komponente übergebenen Wert in der Sohnkomponente

<p>接收到的父页面的属性 -- userid: {this.props.userid} username:{this.props.username}</p>
Nach dem Login kopieren
Von Natürlich kann dies auch auf der Son-Seite erfolgen. Legen Sie den Typ und den Standardwert der übergebenen Parameter fest


// 给属性设置类型BodyIndex.propTypes = {    // isRequired 必须的参数
    userid: React.PropTypes.number.isRequired,
    username: React.PropTypes.string
}// 设置默认值BodyIndex.defaultProps = {
    username: &#39;哈哈&#39;}
Nach dem Login kopieren
Einzelheiten zum Festlegen des Typs finden Sie in der offiziellen Dokumentation

MyComponent.propTypes = { // You can declare that a prop is a specific JS primitive. By default, these
 // are all optional.
 optionalArray: PropTypes.array, optionalBool: PropTypes.bool, optionalFunc: PropTypes.func, optionalNumber: PropTypes.number, optionalObject: PropTypes.object, optionalString: PropTypes.string, optionalSymbol: PropTypes.symbol, // Anything that can be rendered: numbers, strings, elements or an   array// (or fragment) containing these types.optionalNode: PropTypes.node,// A React element.optionalElement: PropTypes.element, // You can also declare that a prop is an instance of a class. This uses
  // JS&#39;s instanceof operator.
  optionalMessage: PropTypes.instanceOf(Message),  // You can ensure that your prop is limited to specific values by treating
  // it as an enum.
  optionalEnum: PropTypes.oneOf([&#39;News&#39;, &#39;Photos&#39;]),  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),  // An array of a certain type
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),  // An object with property values of a certain type
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),  // An object taking on a particular shape
  optionalObjectWithShape: PropTypes.shape({    color: PropTypes.string,    fontSize: PropTypes.number
  }),  // You can chain any of the above with `isRequired` to make sure a warning
  // is shown if the prop isn&#39;t provided.
  requiredFunc: PropTypes.func.isRequired,  // A value of any data type
  requiredAny: PropTypes.any.isRequired,  // You can also specify a custom validator. It should return an Error
  // object if the validation fails. Don&#39;t `console.warn` or throw, as this
  // won&#39;t work inside `oneOfType`.
  customProp: function(props, propName, componentName) {    if (!/matchme/.test(props[propName])) {      return new Error(        &#39;Invalid prop `&#39; + propName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  },  // You can also supply a custom validator to `arrayOf` and     `objectOf`.
  // It should return an Error object if the validation fails. The validator
  // will be called for each key in the array or object. The first two
  // arguments of the validator are the array or object itself, and the
  // current item&#39;s key.
  customArrayProp: PropTypes.arrayOf(function(propValue, key,       componentName, location, propFullName) {    if (!/matchme/.test(propValue[key])) {      return new Error(        &#39;Invalid prop `&#39; + propFullName + &#39;` supplied to&#39; +        &#39; `&#39; + componentName + &#39;`. Validation failed.&#39;
      );
    }
  })
 };
Nach dem Login kopieren
Die Sohnkomponente übergibt die von der übergeordneten Komponente übergebenen Eigenschaften an die untergeordnete Komponente

Durch Erweitern des
-Operators {...this.props} werden alle von der übergeordneten Komponente übergebenen Eigenschaften übertragen übergeben an die eigene untergeordnete Komponente (Enkelkomponente) id={1234} ist Die von der Sohnkomponente selbst an die Enkelkomponente übergebenen Eigenschaften

<GrandSon {...this.props} id={1234}/>
Nach dem Login kopieren
werden von der Enkelkomponente aufgerufen und die Eigenschaften übergeben von der Son-Komponente

<p>{this.props.userid} {this.props.username} {this.props.id}</p>
Nach dem Login kopieren
refs: sind die einzige zuverlässige Möglichkeit, auf den DOM-Knoten innerhalb der Komponente zuzugreifen. Methode


Ref zum Tag hinzufügen

<input ref=&#39;submitButton&#39; type="button" value=&#39;提交&#39; onClick={() => this.changeUserInfo(99)}/>
Nach dem Login kopieren
Wenn Sie den Dom erhalten möchten, rufen Sie ihn über this.refs.xxx ab

this.refs.submitButton.style.color = &#39;red&#39;;
Nach dem Login kopieren
Hinweis:

Rufen Sie Refs nicht vor dem Rendern oder Rendern auf;

Missbrauchen Sie Refs nicht. Wenn Sie es nicht verwenden können, verwenden Sie es nicht!!!

Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Für weitere aufregende Methoden zahlen Sie bitte Beachten Sie auch andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Routing-Parameter von Vue.js

Benutzerdefinierte Direktive von Vue.js

JS-Übergang von Vue.js


Das obige ist der detaillierte Inhalt vonReact.js-Props. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage