Infogram嵌入代码未在React中呈现

Infogram是一个在线数据可视化工具，可以帮助用户创建各种类型的图表、地图和信息图表。它提供了丰富的图表模板和自定义选项，使用户能够根据自己的需求创建专业的数据可视化图表。

在React中嵌入Infogram的代码可以通过以下步骤完成：

1. 首先，确保你已经在React项目中安装了所需的依赖项。你可以使用npm或yarn来安装Infogram的JavaScript库。
2. 在React组件中，你可以使用useEffect钩子来加载Infogram的代码。在useEffect函数中，你可以使用document.createElement方法创建一个script元素，并将其src属性设置为Infogram的JavaScript库的URL。
3. 在useEffect函数中，你可以使用document.body.appendChild方法将script元素添加到页面的body元素中。
4. 在useEffect函数中，你可以使用return语句来清除加载的Infogram代码。这可以通过使用document.body.removeChild方法来删除添加的script元素。

以下是一个示例代码，演示了如何在React中嵌入Infogram的代码：

import React, { useEffect } from 'react';

const InfogramEmbed = () => {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://e.infogram.com/js/dist/embed-loader-min.js';
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, []);

  return (
    <div className="infogram-embed">
      {/* 在这里添加Infogram的嵌入代码 */}
    </div>
  );
};

export default InfogramEmbed;

在上面的示例中，我们创建了一个名为InfogramEmbed的React组件。在useEffect钩子中，我们创建了一个script元素，并将其src属性设置为Infogram的JavaScript库的URL。然后，我们将script元素添加到页面的body元素中。最后，我们返回一个包含Infogram嵌入代码的div元素。

请注意，上述示例中的Infogram JavaScript库的URL仅供参考。你需要根据你自己的Infogram账户和项目来获取正确的URL。

推荐的腾讯云相关产品和产品介绍链接地址：

• 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 腾讯云云数据库MySQL版：https://cloud.tencent.com/product/cdb_mysql
• 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
• 腾讯云人工智能：https://cloud.tencent.com/product/ai
• 腾讯云物联网套件：https://cloud.tencent.com/product/iot-suite
• 腾讯云移动推送：https://cloud.tencent.com/product/umeng
• 腾讯云区块链服务：https://cloud.tencent.com/product/tbaas
• 腾讯云元宇宙：https://cloud.tencent.com/product/tencent-realtime-rendering