Javascript 如何将linkedin个人资料徽章添加到react应用程序 import'/App.css'； 从“./components/Header”导入标题 函数App（）{ 返回( ); } 导出默认应用程序；

用户名\这里只是一个填充linkedin用户名的填充词。问题是我的react应用程序只显示带有我名字的链接，而不是完整的徽章。我没有创建一个基于徽章的css对象或LI profile徽章css对象。我认为我不应该这样做，还是我弄错了？

问题在于如何使用脚本。据我所知，您不能简单地在React中使用script标记。相反，您需要使用几种不同的方法将该脚本集成到应用程序中

在不使用任何附加库或工具的情况下，最简单的方法是使用

useffect

hook

以下是使其工作的代码：

import React, { useEffect } from 'react';
import './style.css';

export default function App() {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://platform.linkedin.com/badges/js/profile.js';
    script.async = true;
    script.defer = true;

    document.body.appendChild(script);

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

  return (
    <div>
      <div
        class="badge-base LI-profile-badge"
        data-locale="en_US"
        data-size="medium"
        data-theme="light"
        data-type="VERTICAL"
        data-vanity="YOUR_OWN_VANITY_HERE"
        data-version="v1"
      >
       <a
          class="badge-base__link LI-simple-link"
          href="https://au.linkedin.com/in/YOUR_PROFILE_HERE?trk=profile-badge"
        />
      </div>
    </div>
  );
}

import React，{useffect}来自“React”；
导入“/style.css”；
导出默认函数App（）{
useffect（（）=>{
const script=document.createElement（'script'）；
script.src=https://platform.linkedin.com/badges/js/profile.js';
script.async=true；
script.defer=true；
document.body.appendChild（脚本）；
return（）=>{
document.body.removeChild（脚本）；
};
}, []);
返回(
使用我自己的配置文件。
问题在于如何使用脚本。据我所知，您不能简单地在React中使用脚本标记。相反，您需要使用几种不同的方法将脚本集成到应用程序中

在不使用任何附加库或工具的情况下，最简单的方法是使用
useffect
hook

以下是使其工作的代码：

import React, { useEffect } from 'react';
import './style.css';

export default function App() {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = 'https://platform.linkedin.com/badges/js/profile.js';
    script.async = true;
    script.defer = true;

    document.body.appendChild(script);

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

  return (
    <div>
      <div
        class="badge-base LI-profile-badge"
        data-locale="en_US"
        data-size="medium"
        data-theme="light"
        data-type="VERTICAL"
        data-vanity="YOUR_OWN_VANITY_HERE"
        data-version="v1"
      >
       <a
          class="badge-base__link LI-simple-link"
          href="https://au.linkedin.com/in/YOUR_PROFILE_HERE?trk=profile-badge"
        />
      </div>
    </div>
  );
}

import React，{useffect}来自“React”；
导入“/style.css”；
导出默认函数App（）{
useffect（（）=>{
const script=document.createElement（'script'）；
script.src=https://platform.linkedin.com/badges/js/profile.js';
script.async=true；
script.defer=true；
document.body.appendChild（脚本）；
return（）=>{
document.body.removeChild（脚本）；
};
}, []);
返回(
使用我自己的个人资料。
另请参阅此部分，以了解向应用程序中添加脚本标记和创建自定义“useScript”的更多选项hook.谢谢你的帮助，但我认为stackblitz示例无法使用它。它也不会为我显示配置文件。我是否需要为容器设置css样式，例如如何在链接中显示它？我只是在手机上再次尝试stackblitz，并删除了默认添加的style.css，但它没有任何效果。因此，不需要这样做。我唯一能想象的是，LinkedIn在某种程度上被你的ISP阻止了，或者出现了某种形式的网络问题。你在控制台中有任何错误吗？我随后了解了有关如何生成徽章的信息。因此，请确保你有脚本和HTML的正确来源。我的个人资料是澳大利亚的，因此可能是dif为您提供。但在这种情况下，只需将
script.src
替换为您从链接的in配置文件中获得的内容，并相应地更改HTML。有关将脚本标记添加到应用程序中以及创建自定义“useScript”的更多选项，请参见此hook.谢谢你的帮助，但我认为stackblitz示例无法使用它。它也不会为我显示配置文件。我是否需要为容器设置css样式，例如如何在链接中显示它？我只是在手机上再次尝试stackblitz，并删除了默认添加的style.css，但它没有任何效果。因此，不需要这样做。我唯一能想象的是，LinkedIn在某种程度上被你的ISP阻止了，或者出现了某种形式的网络问题。你在控制台中有任何错误吗？我随后了解了有关如何生成徽章的信息。因此，请确保你有脚本和HTML的正确来源。我的个人资料是澳大利亚的，因此可能是dif但在这种情况下，只需将
script.src
替换为您从链接的个人资料中获得的内容，并相应地更改HTML即可。