tamakipedia

鎌倉でフロントエンドエンジニアをしています。Wordpress/Javascript/JQuery が得意で、現在React勉強中です!

【contentful】Rich Text を表示するために documentToReactComponents関数 を使う

記事の詳細を作成するときに
記事内容をRich Text で記述するようにしました。
他の項目のようにpropsを渡すだけではなかったので方法を記述します。

contentfulの取得方法はこちら↓ https://okinawanpizza.hatenablog.com/entry/2021/10/21/010930

documentToReactComponents()

contentful側の関数で、リッチテキストの中身を読んでくれる関数のようです。

  • ライブラリをインストール
npm install --save contentful @contentful/rich-text-html-renderer
  • documentToReactComponentsをインポート
import { documentToReactComponents } from '@contentful/rich-text-html-renderer';
  • リッチテキストの項目を引数にして以下のように記述
export default function ArticleDetails({ article }) {
  const {Title, detail} = article.fields

  return (
    <div>
      <div className="detail">
        <h3>detail</h3>
        <div>{ documentToReactComponents(detail) }</div>
      </div>
    </div>
  );
};

これで記事詳細を出力できます。

参考
https://www.contentful.com/developers/docs/javascript/tutorials/rendering-contentful-rich-text-with-javascript/

おしまい