[React+Storybook]KnobsでdangerouslySetInnerHTMLがうまく表示されないとき

現象

Reactで(Vueもだと思うけど)Storybook + Knobsのスタックで、Knobsのtext()にHTMLタグを直接渡して、コンポーネントでdangerouslySetInnerHTMLを使ってレンダリングしようとするとうまく行かない。

原因

Knobsのtext()にHTMLタグを渡すと、親切にタグをエスケープしてくれるらしい。

<p>こんにちは！<br><br>はじめまして<br><br>さようなら</p>

対応

ただアンエスケープするだけでよし。

export const onlyParagraph = () => {
  const beforeContent = text(
    "content",
    "<p>こんにちは！<br><br>はじめまして<br><br>さようなら</p>"
  );

    // Knobsのtext()でHTMLタグがエスケープされてしまうので、アンエスケープしています
    const unescapeHtml = string => {
      const patterns = {
        "&lt;": "<",
        "&gt;": ">",
        "&amp;": "&",
        "&quot;": '"',
        "&#x27;": "'",
        "&#x60;": "`"
      };

      const escapedString = string.replace(
        /&(lt|gt|amp|quot|#x27|#x60);/g,
        match => patterns[match]
      );

      return escapedString;
    }

  return (
    <>
      <HTMLContentWrapper content={unescapeHtml(beforeContent)} />
    </>
  );
};