嗨，我有以下資料從 API 服務回傳，作為社交媒體處理。我 console.log 回傳的資料并得到以下資訊。
0：{type：'facebook'，句柄：'www.facebook.com/username'} 1：{type：'twitter'，句柄：'www.twitter.com/username'} 長度：2 [[Prototype]] : 陣列(0)
我需要它在網頁上表示為普通的 html 鏈接，社交媒體圖示顯示如下：
<a href="www.facebook.com/username"><i className="bi bi-facebook"></i></a>
<a href="www.twitter.com/username"><i className="bi bi-twitter"></i></a>
我已經嘗試了以下
const socialMediaLinks=socialMediaHandles.map(handle => `<a href='${handle.handle}'>
<i className='bi-bi-${handle.type}'></i></a>`)
然后我轉到我希望它在組件上顯示的位置并粘貼以下代碼
{socialMediaLinks}
但是當我這樣做時，文本將作為文本回傳，而不是在頁面上呈現為 html。
我正在使用 React 功能組件。
我實際上是 React 的新手，并試圖弄清楚如何實作這一點。我將不勝感激任何指南。謝謝
uj5u.com熱心網友回復：
雖然有多種方法可以將 HTML 字串注入 React 應用程式，但它們容易出錯且危險。
不要生成 HTML 字串。
你已經在使用 JSX，在那里也使用 JSX。
const socialMediaLinks=socialMediaHandles.map(handle => (
<a href={handle.handle}>
<i className={`bi-bi-${handle.type}`}></i>
</a>
));
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/383866.html