Reactでコンポジション

このエントリーをはてなブックマークに追加

react.jsでは複数のコンポーネントを組み合わせることができます。公式ドキュメントでは「Multiple Components」について今回は触れてみます。本家ではfacebookのGraph APIを使ってユーザの画像とユーザのプロフィールへのリンクを作っていますが、私はそんな便利なfacebookアカウントを持っていないので、今回はQiitaのAPIを実際にAJAXで叩いてJSONを取得した結果をreactで表示してみます。

JSFiddle

以下が今回のコード。出力結果は実際にQiitaのAPIから取得したものです。(こんな使い方はまずしないでしょうけど)

解説

上記はAvatarコンポーネントにProfilePicコンポーネントとProfileLinkコンポーネントを組み合わせたコンポジションの例です。ここで覚えておくべきポイントはOwnershipについてです。

Ownership

In React, an owner is the component that sets the props of other components

と、述べられているようにReactではOwnerコンポーネントは他のコンポーネントのpropsは設定している人のことです。ここでしっかりと切り分けるべき点は、Owner(所有するコンポーネント)-Ownee(所有されるコンポーネント)とParent(親要素)-Child(子要素)の言葉の意味です。

The owner-ownee relationship is specific to React, while the parent-child relationship is simply the one you know and love from the DOM.

Owner-Owneeの関係はReact特有なもので、Parent-Childの関係は今までのDOMでも使われている表現です。上のコードで言えばAvatarコンポーネントがProfilePicコンポーネントとProfileLinkコンポーネントのOwnerであり、Avatarコンポーネントのrender内で記述されているProfilePicとProfileLinkを囲むdiv要素がProfilePicとProfileLinkの親ということになります。

Written on February 24, 2015
このエントリーをはてなブックマークに追加