Cấp bậc tác giả:

DOTNET

Học React Native bài 12: Khái niệm cơ bản về Props

Được viết bởi webmaster ngày 09/11/2019 lúc 09:44 PM
Hầu hết các thành phần có thể custom được khi được tạo ra với các tham số khác nhau. Các tham số này được gọi là props
  • 0
  • 80

Học React Native bài 12: Khái niệm cơ bản về Props

Loading...

Hầu hết các thành phần có thể custom được khi được tạo ra với các tham số khác nhau. Các tham số này được gọi là props. Ví dụ về Image sẽ giúp bạn sử dụng prop source để hiển thị ảnh

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

export default class ExProps extends Component {
  render() {
    let pic = {
      uri:
        'http://dotnet.edu.vn/images/logo-big.png',
    };
    // eslint-disable-next-line react-native/no-inline-styles
    return <Image source={pic} style={{width: 300, height: 300}} />;
  }
}
react-native-19.JPG

Components bạn viết ra cũng có thể sử dụng props. Ví dụ dưới đây sẽ mô tả cách sử dụng props trong Component riêng biệt

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

class Greeting extends Component {
  render() {
    return(
        <Text>Thực hành {this.props.name}!</Text>
        );
  }
}

export default class LotsOfGreetings extends Component {
    render() {
        return (
      <View style={{alignItems: 'center'}}>
        <Greeting name="Lập trình di động" />
        <Greeting name="Thiết kế Web ASP.NET" />
        <Greeting name="Lập trình Java" />
            </View>
        );
    }
}
react-native-20.JPG

Sử dụng prop name giúp bạn có thể custom Greeting component 1 cách dễ dàng và giúp tái sử dụng lại component ở nhiều nơi

Nguồn bài viết: Sưu tầm

Đang tải...
BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

Loading...

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML