如何在React应用中嵌入Instagram帖子，有哪些实现方案？

使用react-instagram-embed是否合适 #

这个方案是可行的，适合快速开发场景：

• 优势：库已经封装好了嵌入脚本加载、生命周期适配、错误兜底等逻辑，你只需要将接口拿到的帖子url或id传入组件对应属性即可，不需要处理原生嵌入的各种时序问题，开发成本极低。
• 劣势：会额外引入第三方依赖，若项目对包体积控制要求极高，可以评估后再选择。

手写原生嵌入是否可行 #

完全可行，可控性更高：
你可以直接使用Instagram官方的嵌入规则，将查询拿到的id替换到对应模板即可，需要注意以下React适配的细节：

• 只需要全局加载一次Instagram官方的embed脚本，不需要每次渲染新帖子都重复加载
• 动态渲染新的帖子块后，需要调用window.instgrm.Embeds.process()方法触发Instagram的嵌入渲染逻辑，否则新插入的帖子块不会正常显示
• 需要处理脚本加载的时序问题，避免脚本还未加载完成就调用渲染方法报错
• 组件卸载时做好对应清理逻辑，避免内存泄漏

React中的推荐实现方式 #

可以根据你的业务场景选择：

1. 普通业务场景优先选择封装库，示例用法：

import InstagramEmbed from 'react-instagram-embed';

// postUrl为你从接口拿到的帖子链接
function InstagramPost({ postUrl }) {
  return (
    <InstagramEmbed
      url={postUrl}
      width="100%"
      hideCaption={false}
    />
  );
}

2. 不想引入第三方依赖可以自行封装原生嵌入组件，参考实现：

import { useEffect, useRef } from 'react';

const CustomInstagramEmbed = ({ postId }) => {
  const blockRef = useRef(null);

  useEffect(() => {
    // 处理脚本加载与渲染
    const renderEmbed = () => {
      if (window.instgrm) {
        window.instgrm.Embeds.process();
        return;
      }
      const script = document.createElement('script');
      script.src = 'https://www.instagram.com/embed.js';
      script.async = true;
      script.onload = () => window.instgrm.Embeds.process();
      document.body.appendChild(script);
    };

    renderEmbed();
  }, [postId]);

  return (
    <blockquote
      ref={blockRef}
      className="instagram-media"
      data-instgrm-permalink={`https://www.instagram.com/p/${postId}/`}
      data-instgrm-version="14"
      style={{ maxWidth: '540px', width: '100%', margin: '0 auto' }}
    />
  );
};

export default CustomInstagramEmbed;

注意：仅公开可见的Instagram帖子可以正常嵌入，私有帖子嵌入后会显示不可访问提示。

内容的提问来源于stack exchange，提问作者meez