如何添加linkedin個人資料徽章以響應應用程序

Question

import './App.css';
import Header from './components/header'

function App() {
  return (
    <div className="App">
      <Header />
      <script src="https://platform.linkedin.com/badges/js/profile.js" async defer type="text/javascript"></script>
      <div class="badge-base LI-profile-badge" data-locale="en_US" data-size="medium" data-theme="dark" data-type="VERTICAL" data-vanity="USERNAME_HERE" data-version="v1"><a class="badge-base__link LI-simple-link" href="https://ca.linkedin.com/in/USERNAME_HERE?trk=profile-badge">USERNAME_HERE</a></div>
    </div>
  );
}

export default App;

USERNAME_HERE 只是用來填寫linkedin 用戶名的填充物。 問題是我的反應應用程序只顯示帶有我名字的鏈接而不是完整的徽章。 我沒有制作徽章基礎 css object 或 LI-profile-badge css ZA8CFDE6311BD59EB2AC9666F9 我假設我不應該還是我弄錯了？

Answer 1

問題在於您如何使用腳本。 據我所知，您不能簡單地在 React 中使用腳本標簽。 相反，您需要使用幾種不同的方式將該腳本集成到您的應用程序中。

最簡單且不使用任何其他庫或工具的方法是使用useEffect掛鈎。

這是使其工作的代碼：

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

請注意，您確實需要用您自己的配置文件虛榮和鏈接替換“數據虛榮”和實際的 HREF。 但是您可以從您的 LinkedIn 個人資料中獲取，您可以在其中復制實際的徽章代碼。 使您的解決方案不起作用的唯一原因可能是您嘗試導入該腳本的方式，因此請嘗試使用 useEffect 標簽，我相信它應該適合您。

編輯：這是一個帶有我自己的個人資料的StackBlitz 示例。