React Native – Props

“Props” atau properties, adalah data yang diteruskan atau dikirim ke “child component” pada sebuah aplikasi React. React component me-render elemen-elemen UI berdasarkan “props” dan “internal state” mereka. Props yang digunakan oleh sebuah component (dan penggunaan) menentukan cara bagaimana component dapat dikendalikan dari luar component tersebut.

PropTypes

“prop-types” package memungkinkan anda untuk menambahkan pemeriksaan “runtime type” pada component anda yang memastikan format/type dari props yang dikirimkan ke component sudah benar. Misalkan, jika anda salah mengisikan format/type props “name” atau “isYummy” ke contoh component dibawah ini maka akan keluar “throw an error” pada mode development, namun pada mode production pengecekan format/type prop ini tidak dilakukan. Dengan propTypes component anda akan lebih readable dan maintainable.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';
import styles from './styles.js';
class Recipe extends Component {
 static propTypes = {
  name: PropTypes.string.isRequired,
  isYummy: PropTypes.bool.isRequired
 }
 render() {
  return (
   <View style={styles.container}>
    <Text>{this.props.name}</Text> 
    {this.props.name}
    {this.props.isYummy ? THIS RECIPE IS YUMMY : null}
   </View>
  )
 }
}
AppRegistry.registerComponent('Recipe', () => Recipe);
// Memanggil component
<Recipe name="Pancakes" isYummy={true} />
Multiple PropTypes

Anda dapat memiliki beberapa propTypes (format/type) untuk satu props. Misalnya, props “name” pada contoh component dibawah ini bisa ber-type “string” dan bisa juga ber-type “object”.

static propTypes = {
 name: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.object
 ])
}
Children Props

Berikut adalah contoh penggunaan props “children” pada component Recipe

<Recipe children={something}/>

Jika tampilan yang kita inginkan nantinya secara code statis adalah seperti ini

<Recipe>
 <Text>Hello React Native</Text>
</Recipe>

Maka pada “function” render component Recipe kita edit seperti ini:

return (
 <View style={styles.container}>
  {this.props.children}
  {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
 </View>
)

Dan definisi proptypes untuk props component Recipe adalah seperti dibawah ini

children: PropTypes.node

Apa itu props?

Props digunakan untuk mengirim data dari “parent component” ke “child component”. Props hanya bisa dibaca. “Child component” hanya bisa mengambil props yang dikirim dari parent menggunakan this.props.keyName. Dengan props component akan lebih “reusable”.

Penggunaan props

Salin kode di bawah ini ke index.android.js atau ke file index.ios.js untuk menggunakan props.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
 render() {
  return (
   <Text>Hello {this.props.name}!</Text>
  );
 }
}
class LotsOfGreetings extends Component {
 render() {
  return (
   <View style={{alignItems: 'center'}}>
    <Greeting name='Rexxar' />
    <Greeting name='Jaina' />
    <Greeting name='Valeera' />
   </View>
  );
 }
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);

Dengan props kita dapat membuat component generik. Contoh, anda mempunyai Button component. anda dapat memberikan beberapa props pada component tersebut, sehingga anda dapat menempatkan tombol itu di dalam “view” mana saja.

source: Props-React Native

Default Props

defaultProps memungkinkan anda menetapkan nilai-nilai default props untuk component anda. Contoh di bawah ini jika anda tidak menetapkan isi props “name” saat memanggil component, ia akan menampilkan nilai default yaitu “John”. Jika tidak maka akan menampilkan nilai yang sudah anda tetapkan.

class Example extends Component {
 render() {
  return (
   <View>
    <Text>{this.props.name}</Text>
   </View>
  )
 }
}
Example.defaultProps = {
 name: 'John'
}

Add a Comment

Your email address will not be published. Required fields are marked *