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

개요

새해 복 많이 받으세요.
나는 새해부터 인스타그램 투고의 삽입식과 싸우고 있다.새해에 처음으로 그곳에서 매혹적인 내용을 써 보았다.

하고 싶은 일

인스타그램의 내장 코드를 DB에 저장한다.인스타그램에 대한 삽입 코드는 참고하세요.

자체 제작된 API를 통해 DB에서 포함된 코드를 가져옵니다.

코드를 dangerouslySetInnerHTML에 삽입합니다.또한dangerouslySetInnerHTML의 상세한 내용은 React의 dangerouslySetInnerHTML 사용를 참조하십시오.

과제와 원인

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

코드에 삽입된script 탭//www.instagram.com/embed.js이 실행되지 않았기 때문입니다.이것을 실행할 수 있도록 방법을 강구할 필요가 있다.

대응

모든 발언에 포함된 코드의 HTML 그리기가 끝나는 단계에서 embed.js를 읽어야 합니다.즉, react의 DOM 구축 후 js 읽기를 진행한다.

삽입식 코드에 포함된 embed.js의script 탭을 삭제합니다.

정시componentDidMount.componentDidMount의 처리 시간에 관해서는 react의 DOM 구축 후 특정 처리를 원합니다의 글을 참고하십시오.이번 참조componentDidMount를 useEffect로 대체합니다,useEffect로 실시.

useEffect 내 처리에서 참조React에서 script 태그를 생성하고 스크립트를 실행하거나 외부 스크립트를 읽는 방법,embed.js 읽기 처리를 실행합니다.

샘플

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>
  );
}