[react]文字列をinnerHTMLなどのHTML(JSX)として出力

7891 ワード
テキストリンク
データをAPIにインポートしてマッピングし、画面上のHTMLタグをStringとして出力します.
return (
  <div className="search-result">
    <ul className="result-list">
      {
        list && list.map((item) => (
          <li key={ item.isbn }>
            <h2>{ item.title }</h2>
            <span>{ item.author }</span>
          </li>
        ))
      }
    </ul>
  </div>
)

NAVER APIでは,検索語に該当する部分が<b></b>タグで包まれている.このタグをStringタグではなくJSXタグに設定します.

解決策


dangerouslySetInnerHTML

dangerouslySetInnerHTMLは、DOMにおいてinnerHTMLの反応剤を使用する代替方法である.
通常、コードにHTMLを設定する動作は、サイト間スクリプト(XXS)攻撃にさらされます.したがって、危険性を警告するためには、dangerouslySetInnerHTMLを記述し、__htmlキーでオブジェクトを伝達しなければならない.
📎 危険なSetInnerHTMLドキュメント
dangerously...🔥 危険な感じがしますが、dangerouslySetInnerHTMLかinnerHTMLかコードでHTMLを設定するので、どちらも注意して使いましょう.innerHTMLを使用してDOMの変更を認識できません.逆に,dangerouslySetInnerHTMLを用いて仮想DOMを実際のDOMと比較すると,変更箇所を再現できる.
return (
  <div className="search-result">
    <ul className="result-list">
      {
        list && list.map((item) => (
          <li key={ item.isbn }>
            <h2 dangerouslySetInnerHTML={{__html: item.title}}></h2>
            <span>{ item.author }</span>
          </li>
        ))
      }
    </ul>
  </div>
)
Ansible Module - Setup
Ansible Module - Services