props.md

id	title
props	Пропс

Ихэнх компонентүүд үүсэхдээ өөр өөр параметрын утга авснаар өөр байх боломжтой болдог. Эдгээр параметрүүдийг props гэж нэрлэдэг.

Жишээ нь, React Native-ийн нэг үндсэн компонент бол Image. Зураг харуулая гэж бодоход та source гэдэг нэртэй проп үүсгэн тухайн зураг юу харуулах гэж буйг удирдаж болно.

import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}}/>
    );
  }
}

// Create React Native App ашиглаж байвал доорх мөрийг алгас
AppRegistry.registerComponent('AwesomeProject', () => Bananas);

{pic} гэсэн нь хаалтанд байгааг анзаарна уу – pic хувьсагчийг JSX руу оруулсан байгаа. Та JavaScript-ийн ямар ч илэрхийллийг JSX-т хаалтанд хийж болно.

Таны өөрийн оруулсан компонент нь props байж болно. Ингэснээр танд нэг компонентийг аппынхаа олон газарт ашиглах боломж олгоно. Ингэхдээ ашигласан газар бүртээ арай өөр пропстой ашиглаж болно. render функц дотроо this.props гэснийг ашиглахад болно. Жишээ нь:

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Text>Hello {this.props.name}!</Text>
      </View>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center', top: 50}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

// Create React Native App ашиглаж байвал доорх мөрийг алгас
AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

name-ийг проп болгосноор Greeting компонентийг өөрчлөх боломжтой болгож байна. Тэгэхээр бид энэ компонентийг мэндчилгээ тус бүртээ дахин ашиглаж болно. Энэхүү жишээн дээр төрөлх компонент мэтээр JSX-д Greeting хэсгийг ашигласан байна. Үүнийг хийх боломж нь React-ийг илүү догь болгож байгаа юм. Хэрэв та хэрэглэгчтэй харилцах интерфейсээ өөрчлөхийг хүсвэл өөрөө шинээр зохион гаргаж болно.

Өөр нэг зүйл нь View компонент юм. View нь бусад компонентүүдийг агуулах компонент болгон ашиглах давуу талтай бөгөөд style болон layout-ийг удирдахад тусалдаг.

props болон Text, Image, ба View компонентүүдийн тусламжтай та олон төрлийн статик дэлгэц хийх боломжтой. Аппаа хэрхэн өөрчлөгддөг байхаар хийх тухай мэдэхийг хүсвэл State-ын тухай уншаарай.