React Native のプロップとは何ですか?-jsチュートリアル-php.cn

React Native のプロップとは何ですか?

WBOY

リリース： 2023-08-29 18:13:10

転載

1022 人が閲覧しました

Props は、React コンポーネントの変更に役立つプロパティです。作成されたコンポーネントは、props の概念を使用してさまざまなパラメーターで使用できます。小道具を使用すると、要件に従ってコンポーネントを再利用しながら、あるコンポーネントから別のコンポーネントに情報を渡すことができます。

ReactJS に習熟している場合は、React Native で採用されているのと同じ概念である props に精通しているでしょう。

プロップとは何かを説明するために例を見てみましょう。

例 1: React Native 組み込みコンポーネントのプロパティ

画像コンポーネントを検討します -

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

ログイン後にコピー

スタイルand Source は属性であり、画像コンポーネントのプロパティです。スタイルプロパティはスタイル (幅、高さなど) を追加するために使用され、ソースプロパティはユーザーに表示される画像に URL を割り当てるために使用されます。画像コンポーネントのソース、スタイル、および組み込みプロパティ。

以下に示すように、URL を格納する変数を使用して、それをソース属性に使用することもできます。-

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

ログイン後にコピー

以下の例は、組み込みの小道具を使用して単純な画像を表示することを示しています-

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

const MyImage = () => {
   let imgURI = {
      uri: &#39;https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png&#39;
   };
   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: &#39;stretch&#39;,
   }
});
export default MyImage;

ログイン後にコピー

例 2: カスタムコンポーネント内のプロパティ

プロパティを使用して、あるコンポーネントから別のコンポーネントに情報を送信できます。以下の例では、Student と Topic の 2 つのカスタムコンポーネントが作成されます。

テーマコンポーネントは次のとおりです -

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

ログイン後にコピー

このコンポーネントはパラメータ props を受け取ります。これは、名前を props.name として表示するために Text コンポーネント内で使用されます。 Student コンポーネントから Subject コンポーネントにプロパティを渡す方法を見てみましょう。

student コンポーネントは次のとおりです -

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

ログイン後にコピー

Student コンポーネントでは、Subject コンポーネントが name 属性とともに使用されます。渡される値は数学、物理学、化学です。 name 属性に別の値を渡すことでテーマを再利用できます。

これは、Student コンポーネントと Topic コンポーネントおよび出力を含む実際の例です。

import React from &#39;react&#39;;
import { Text, View } from &#39;react-native&#39;;

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;

ログイン後にコピー