はじめに

こんにちは。最近は本業でRailsを触ってばかりの日々が続いております。

さて、今回はGatsbyでカスタムコンポーネントを使用しているのですが、コンポーネント外部から値を注入する方法について記載します。

参考になれば幸いです

（ぜひLGTMいただけましたら）

Gatsbyでコンポーネントの作り方はこちら

結論

コンテンツ

記事のマークダウン内に以下のようにコンポーネントを呼び出す場合。

post.md

<custom-component name="こんにちは"></custom-component>

コンポーネントの実態

src/components/CustomComponent.js

import React from 'react'

const CustomComponent = props => (
  <div>
      <p>{props.name}</p>
      <p>{props.keywords}</p>
  </div>
)

export default CustomComponent

コンポーネント突合

src/components/PageBody.js

import React from 'react'
import CustomComponent from "../components/CustomComponent"
import RehypeReact from "rehype-react"

const PageBody = props => {
  const renderAst = new RehypeReact({
      createElement: React.createElement,
      components: {
        "custom-component": p => CustomComponent({...p, {keywords: props.keywords}})
      }
  }).Compiler

  return (
    <Body>
      {renderAst(props.body.childMarkdownRemark.htmlAst)}
    </Body>
  )
}

export default PageBody

解説

普通にコンポーネントから値を渡すパターン

記事のマークダウン内に以下のようにコンポーネントを呼び出す

post.md

<custom-component name="こんにちは"></custom-component>

コンポーネント内では以下のように、propsに渡ってくるのでそれをレンダリングするだけ。

src/components/CustomComponent.js

import React from 'react'

const CustomComponent = props => (
  <div>
      <p>{props.name}</p>
  </div>
)

export default CustomComponent

今回は外部から注入するパターンを追加

以下例では、ページ別で管理しているkeywordsの値をマークダウンからねじ込むコンポーネントに注入します。

keywordsはPageBodyを呼び出した際にpropsで渡ってきます。

それをcustom-componentをCustomComponentに置き換える際に、コンポーネントが持っている値にkeywordsをマージして呼び出しています。