리액트에서 인스타그램 기고를 매립할 때 빠져있는 거.

개요

하고 싶은 일

과제와 원인

코드가 삽입된 발언이 표시되지 않았습니다. 결과는 다음과 같습니다.

대응

샘플

export default function InstagramReactSample() {
  const [posts, setPosts] = useState([]);
  
  useEffect(() => {
    // 自作で用意したバックエンドからインスタグラムの埋め込みコードを取得しセット（詳細は割愛）
    getPosts(setPosts);
  }, []);

  useEffect(() => {
    // 投稿の描画が終わったらスクリプトを読みこませる。
    if (posts.length > 0) {
      const script = document.createElement("script");
      script.type = "text/javascript";

      var attr = document.createAttribute("src");
      attr.value = "//www.instagram.com/embed.js";
      script.setAttributeNode(attr);

      const head = document.getElementsByTagName("head")[0];
      head.appendChild(script);
    }
  }, [posts]);

  return (
    {/* インスタグラムの埋め込みコード */}
    <div>
      {posts.length > 0 && (
        <>
          {posts.map((p) => {
            return (
              <div dangerouslySetInnerHTML={{ __html: p.instagramCode }} />
            );
          })}
        </>
      )}
    </div>
  );
}