React~基礎編~Props

react

React学習記録

こんにちは! 今回は、Propsについて学びましょう^^

Propsとは

Propsとは、Propertyを意味する言葉です。例えば、関数の引数になります。

Propsを利用することで、コンポーネントをよりカスタマイズすることができるようになります。

実際にコードを見てみましょう。

Propsを設定するのは、簡単です。index.jsに設定した通り、コンポーネントに任意の変数と値を設定するだけです。設定した値は、対象のコンポーネント側で、「tihs.props」から取得できます。

Propsの要件

Propsの要件を書いてみました。

・Propsは、コンポーネントの設定に用いられる
・Propsの値は、書き換え不可(immutable)
・Propsは、文字列で渡す必要がある
<User name="KOUKI", title="SoftWare Developer" />
・他のTypeを渡したい場合は、{}で囲って渡す必要がある
<User name="KOUKI", salary={ 10000 } hobbies { ["bridge", "reading", "tea"] } />

実装してみるとこんな感じです。

やってみよう1

ここまで学んだ内容を「自分で考えながら」コードを書いてみると知識がかなり定着します。

何かコードを書いてみましょう! サンプルを載せておきます。

JSX内でループ処理

JSX内でループ処理を行いたい場合は、「array.map(fn)」を使用します。arrayとは、配列のことです。

やってみよう2

「やってみよう1」のソースコードをループを使用したものに書き換えてみましょう。解答例を載せておきます。

ループを使うことで、プログラムがより良くなりましたね^^

デフォルトProps

Propsには、初期値を設定することも可能です。

スタイル

最後にCSSでスタイルをつけてみましょう。

index.htmlにて、style.cssを読み込みを行っています。そして、Slot.jsのタグにつけた「className」に対して、スタイルを定義しました。

通常、HTMLに定義するクラスは「class」とつけますが、Reactだと「className」になります。

スタイルを適用した画面がこちらです。

タグに直接、CSSを埋め込むこともできます(インライン)。

インラインで埋め込む時は、タグはキャメルケースになります。(font-size -> fontSize, background-color -> backgroundColor)

あとがき

Propsを使えば、プログラミングの幅が広がりそうですね。次回は、より実践的なReactアプリを作っていきましょう^^

コメントを残す