2019-01-25に投稿

GatsbyJSでMrakdown内でコンポーネントを使う

GatsbyJSでMrakdown内でコンポーネントを使う

Markdown内でReactコンポーネントを使いたい欲求が出てきたので実装してみる。

Gatsby Remark Componentを使う

こういうReactコンポーネントを使う場合は、Gatsby Remark Componentを使う。

gatsby-remark-responsive-iframeをインストール

npm install --save gatsby-remark-component
npm install --save rehype-react

gatsby-config.jsmの設定

plugins: [
  {
    resolve: "gatsby-transformer-remark",
    options: {
      plugins: ["gatsby-remark-component"]
    }
  }
]

実際の動作確認

とりあえず簡単なコンポーネントを作ってみる。
/components/Sample.js

import React from 'react'

const Sample = () => (

<div>
    <p>これはコンポーネントです。</p>
</div>

)
export default Sample

blog-post.jsを変更する。
読み込みを追加

import rehypeReact from "rehype-react"
import Sample from "../components/SampleSample"

そして、コンポーネントを使えるように設定する。注意点としては小文字にしなければいけない。

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { "sample": Sample },
}).Compiler
<div dangerouslySetInnerHTML={{ __html: post.html }} />

{
  renderAst(post.htmlAst)
}

に変更する。
あとGraphQLクエリのHTMLをhtmlastに変更する。

# ...
markdownRemark(fields: { slug: { eq: $slug } }) {
  htmlAst
}
# ...

そしてマークダウンファイル内に

<sample></sample>

と書く。

<sample />

書きたいがこれでは動かない。注意。
018-1.JPG
出来た!
お疲れ様でした。

ハマったところ

公式がimport {Sample} form ../という書き方していたのでそこでハマった。

Originally published at www.corylog.com

view_list [連載] ブロガー向けGatsby講座
第15回 GatsbyJSでMarkdownで画像を表示する
第16回 GatsbyJSでiframeタグを使う
第17回 GatsbyJSでMrakdown内でコンポーネントを使う
第18回 GatsbyJSでカテゴリー機能を実装する
第19回 GatsbyJSにドロワーメニューを追加する

aocory

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント