🦔

【React】Propsについて

2023/05/18に公開

Golang

JavaScript

React

tech

Propsについて

Propsは親コンポーネントから、子コンポーネントへ値を受け渡す仕組みです。具体例を見て行きましょう。

親コンポーネント


import Sample from './components/Sample';

export default function App() {
　　　　　　　　　return {
      <View>
        <Sample text1={'hogehoge'} text2={'hogehoge'}/> : 子コンポーネントの呼び出し。
      </View>
    }
}

子コンポーネント

export default function Sample(props) {
　　　　return {
　　　　　　　　<View>
　　　　　　　　　　　　<Text> props.text1 </Text>
　　　　　　　　</View>
　　　　}
}

親コンポーネントで、子コンポーネントの呼び出しをおこなっています。

Propsは、親コンポーネントAppで得られた値を属性を通して, 子コンポーネントSampleに受け渡すことができます。

具体的には、Reactがユーザー定義のコンポーネントを見つけた場合、JSXにかかれている属性と子の要素を、一つのオブジェクトとしてコンポーネントに受け渡します。このオブジェクトのことをpropsと呼びます。

注意点としては、propsは読み取り専用であり、propsに対しては、必ず純関数のように振る舞わないといけません。入力を変更せず、同じ入力に対しては、同じ結果を返さなければいけません。

また値の渡し方には注意する必要があります。

<Test a={1} b ={{x: 1, y: 2}} />

{}はJavascript的に評価するために必要なもので、オブジェクトを渡したい場合には、bのようにオブジェクト用の{}を用意する必要があります。

また純粋な文字列を渡す場合は{}を省略することもできます。

<Test c="text" />

Trueのboolean変数を渡したい場合には、props名だけでも可能です。

<Test isActive />  // <Test isActive={true} />と同じ

またpropsは分割代入を用いて、次のように各要素に名前を与えることもできます。

子コンポーネント

export default function Sample({text, text2}) {
　　　　return {
　　　　　　　　<View>
　　　　　　　　　　　　<Text> {text1}, {text2} </Text>
　　　　　　　　</View>
　　　　}
}

普通の変数をもつオブジェクトを一つにまとめ、それらを自動的に展開して子コンポーネントに渡すことも可能です。

const data = { a: 'hoge1', b: 10, c: 'hoge2'}

<Test {...data} /> // <Test a={data.a} b={data.b} c={data.c} /> と同じ

特定の要素のみを取り出すことも可能です。

const data = { a: 'hoge1', b: 10, c: 'hoge2'}
const {a, ...rest} = data
<Test {...rest} />

また子コンポーネントでの受け取りにおいても特定の要素のみを抽出し、子コンポーネントにそのほかを受け渡すようなことも可能です。

// id以外の全てのPropsを子にわたす
function Test({a, ...rest}) {
  console.log(a)
  return <TestChildComponent {...rest}>
}

Propsについて

Discussion