Detaillierte Erläuterung der Verwendung von Requisiten in React-Native

Dieser Artikel stellt hauptsächlich die detaillierte Verwendung von Requisiten in React-Native vor. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.

Requisiten sind Eigenschaften, die dazu dienen, die Eigenschaften einer Komponente zu beschreiben. Es wird von der übergeordneten Komponente an die untergeordnete Komponente übergeben.

Requisiten verwenden

die vorherige Seite durchlaufen

Neue PropsTest.js-Datei erstellen

exprot default class PropsTestextendesComponent{
  render(){
    return <Text>{this.props.name}</Text>
  }
}

Verwenden Sie die PropsTest-Komponente auf der vorherigen Seite

import PropsTest from './PropsTest'

<PropsTest 
  name = &#39;XiaoMing&#39;
/>

Hinweis: Bei den oben genannten Codes handelt es sich ausschließlich um Codeausschnitte.

Standardattribute und ihre Funktionen

Da die Requisitenattribute alle auf der vorherigen Seite übergeben wurden, können sie nicht geändert werden. Wir können jedoch einige Standardwerte für Requisiten in der PropsTest-Datei definieren.

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

Beachten Sie, dass defaultProps das Schlüsselwort static für statische Änderungen verwenden muss. Wenn auf der vorherigen Seite kein Wert übergeben wurde, wird auf diese Weise das Standardattribut angezeigt.

Requisiten einschränken und prüfen

exprot default class PropsTestextends Component{
  static defaultProps={
    name: 'XiaoHong'
  }
  static propTypes={
    name: PropTypes.string,
    age: PropTypes.number,
    sex: PropTypes.string.isRequired
  }
  render(){
    return <Text>{this.props.name}</Text>
  }
}

Sie können propTypes verwenden, um die Art der Attribute in Requisiten zu bestimmen. Ja, das tun Sie auch Sie müssen das Schlüsselwort static verwenden, um es zu ändern.

isRequired kann erforderliche Elemente angeben

Hinweis: Das Attribut

propTypes befindet sich im Reaktionspaket und muss importiert werden, bevor es verwendet werden kann.

Props-Erweiterungsoperator

Die neueste Syntax von ES6

Angenommen, unsere Komponente benötigt viele Eigenschaften, wie folgt:

params = {name: 'XiaoZhang', age: 18, sex: '男'}

// 如果需要传递给下一个页面需要：
<PropsTest
  name = {params.name}
  sex = {params.sex}
  age = {params.age}
/>
// 等等，这样如果属性特别多，代码将会变得难以维护。

Sie können die neueste Stretch-Operator-Funktion in ES6 verwenden

<PropsTest
  {...params}
/>

Sehr einfach

Requisiten Destrukturierende Zuweisung

Die neueste Syntax von ES6

Wenn Sie einige Objekte vom Erweiterungsoperator abrufen und in einer anderen Komponente verwenden möchten, können Sie die Methode der destrukturierenden Zuweisung verwenden

var {name, age} = params;

// 其他地方就可以直接引用name和age了

{name}或{age}

// 这么做的好处，同样是不需要使用如下的传统方式

{params.name}或{params.age}

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Requisiten in React-Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!