atomic designのTemplatesはrender propsで書く

はじめに

reactを用いたatomic designのTemplatesの実装に２通りあると思っている。

• データを引数で受け取る方式。pagesにデータとの依存解決をしてもらう。
• コンポーネントを引数で受け取る方式。pagesにorganismsとの依存解決をしてもらう。

本には前者で書いてあるようだけど、render propsを使うことでtemplatesの抽象度を上げることできる。

danが言っていた「render propsを使えばバケツリレーを浅くできるよ」の意味を知るわかりやすい例にもなると思うので書いてみる。

データを引数で受ける方式

本にはこう書いてあるみたい

const TweetsPage = ({ tweets, goBack }) => (
  <TweetsTemplate
    headerData={{
      title: 'tweets',
      onCLickLeftButton: () => goBack(),
    }}
    ListData={tweets}
  />
)

templateはデータを受け取る。
命名はわかり易さのためにPageとかOrganismsとかをsufixにしてます。
TweetsPageに対してTweetTemplateがある。
TemplatesはPageとほとんどが1対1で作っていくことになると思う。
Templateにデータを流し込むのがPageのしごと。

コンポーネントを引数で受ける方式

個人的にはこうだと思ってた

const TweetsPage = ({ tweets, goBack }) => (
  <MyTemplate
    headerTitle='tweets'
    headerLeftItem={() => (
      <MyButtonAtom
        icon='back'
        onClick={() => goBack()}
      />
    )}
    body={() => (
      <TweetsList tweets={tweets} />
    )}
  />
)

templateはコンポーネントを受け取る。
Templatesの抽象度は前者より高く、枠だけ決めていてコンテンツが何かはPagesが注入する。
なのでTemplatesはPageと1対1ではなく１アプリケーションに付き1~3個くらいにしかならないと思う。

「PageがTemplatesとOrganismsを知っている」って感じなので、Organismsに直接Paramsを渡せる。
これでdanが言っていた「render propsを使えばバケツリレーを浅くできるよ」を体感できると思う。

きもち

reactはpropsを受けてjsxを返すだけのただ関数。(Props) => JSX
propsがデータだろうがコンポーネント(関数)だろうが大した差ではないけど、関数渡しても良いんだ、高階化してい良いんだってのを知ってるか知らないかで設計は変わる。ただの知識なので誰もが知ってて損ないと思う。