【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> ); };
これで記事詳細を出力できます。
おしまい