Đạo cụ trong phản ứng gốc là gì?

Đạo cụ là các thuộc tính giúp sửa đổi thành phần phản ứng. Thành phần được tạo có thể được sử dụng với các tham số khác nhau bằng cách sử dụng khái niệm đạo cụ. Với các đạo cụ, bạn có thể chuyển thông tin từ thành phần này sang thành phần khác và đồng thời sử dụng lại thành phần theo yêu cầu của bạn.

Bạn sẽ quen thuộc với các đạo cụ nếu bạn đã thành thạo với ReactJS, các khái niệm tương tự cũng tuân theo trong React Native.

Chúng ta hãy xem một ví dụ giải thích đạo cụ là gì.

Ví dụ 1:Đạo cụ bên trong Thành phần tích hợp sẵn trong React Native

Xem xét thành phần Hình ảnh -

<Image
   style={styles.stretch} source={{uri: 'https://pbs.twimg.com/profile_images/486929358120964097   /gNLINY67_400x400.png'}}
/>

Phong cách và nguồn là các thuộc tính tức là đạo cụ cho thành phần hình ảnh. Đạo cụ kiểu được sử dụng để thêm kiểu, tức là chiều rộng, chiều cao, v.v. và đạo cụ nguồn được sử dụng để gán url cho hình ảnh để hiển thị cho người dùng. Nguồn và kiểu cũng như các đạo cụ tích hợp của thành phần Hình ảnh.

Bạn cũng có thể sử dụng một biến lưu trữ url và sử dụng nó cho các đạo cụ nguồn như được hiển thị bên dưới -

let imgURI = {
   uri:
'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
};
return (
   <View style={styles.container}>
      <Image style={styles.stretch} source={imgURI} />
   </View>
);

Ví dụ dưới đây cho thấy việc hiển thị một hình ảnh đơn giản bằng cách sử dụng các đạo cụ tích hợp -

import React from "react";
import { Image , Text, View, StyleSheet } from "react-native";

const MyImage = () => {
   let imgURI = {
      uri: 'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'
   };
   return (
      <View style={styles.container}>
         <Image style={styles.stretch} source={imgURI} />
      </View>
   );
}
const styles = StyleSheet.create({
   container: {
      paddingTop: 50,
      paddingLeft: 50,
   },
   stretch: {
      width: 200,
      height: 200,
      resizeMode: 'stretch',
   }
});
export default MyImage;

Ví dụ 2:Đạo cụ bên trong Thành phần tùy chỉnh

Bạn có thể sử dụng các đạo cụ để gửi thông tin từ thành phần này sang thành phần khác. Trong ví dụ bên dưới, có hai thành phần tùy chỉnh được tạo, Sinh viên và Chủ đề.

Thành phần Chủ đề như sau -

const Subject = (props) => {
   return (
      <View>
      <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!</Text>
      </View>
   );
}

Thành phần nhận các tham số đạo cụ. Nó được sử dụng bên trong thành phần Văn bản để hiển thị tên dưới dạng props.name. Hãy để chúng tôi xem cách chuyển các đạo cụ cho thành phần Chủ đề từ Thành phần sinh viên.

Thành phần Sinh viên như sau -

const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
      </View>
   );
}

Trong thành phần Sinh viên, thành phần Chủ đề được sử dụng với các đạo cụ tên. Các giá trị được thông qua là Toán, Lý và Hóa. Chủ đề có thể được sử dụng lại bằng cách chuyển các giá trị khác nhau cho tên đạo cụ.

Đây là một ví dụ làm việc với thành phần Sinh viên và Chủ đề cùng với đầu ra.

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

const Subject = (props) => {
   return (
      <View>
         <Text style={{ padding:"10%", color:"green" }}>I am studying - {props.name}!      </Text>
      </View>
   );
}
const Student = () => {
   return (
      <View>
         <Subject name="Maths" />
         <Subject name="Physics" />
         <Subject name="Chemistry" />
         </View>
   );
}
export default Student;

Đầu ra