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 = 'XiaoMing' />
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!
