
reactに最近をハマっています。
自分のサイトがwpなので、wp情報をwp rest apiから取って来てreactを使って表示する作業をしていた時に問題が。
wp rest apiはJSON情報
JSONの情報をaxiosで取ってきてそのまま出力する感じの流れなのです。
タイトルやカテゴリ、画像、contentの部分もそのまま取れます。
取ってきたJSONの中身(ざっくり)
{ "id": 1255, "date": "2022-10-08T20:30:03", "title": { "rendered": "タイトルが入ります" }, "content": { "rendered":"<p>テキスト</p>" } }
左側の””の中身を指定して出力する感じになります。
コンテンツの出力
{posts.map((post, index) => ({post.content.rendered}))}
ただこのまま出すと、タグが変換されず<p>テキスト</p>のようにhtmlが生のまま表示されてしまって、困ったことにページが構築されないんですね。そんな時の対応があったので覚書。
dangerouslySetInnerHTML
dangerouslySetInnerHTMLを使うと、取ってきたタグ情報をhtmlに変換して出力してくれます。
使いすぎると脆弱性の元になりますので、雰囲気見て使おうと思います。
使い方
{posts.map((post, index) => ( <div dangerouslySetInnerHTML={{__html: post.content.rendered}}></div> ))}
まとめ
無事出力完了しました、これで個ページは完成!
学び始めは慣れるまでは難しいですねー!
ちなみにvue.jsでは v-htmlを使うと同じことができるみたいです。