如何在 React 中将 link 文本解析为 html

Question

您好，我从 API 服务返回以下数据作为社交媒体句柄。我console.log返回的数据，得到如下

0: {type: 'facebook', handle: 'www.facebook.com/username'} 1: {type: 'twitter', handle: 'www.twitter.com/username'} length: 2 [[Prototype]]: Array(0)

我需要它在网页上正常显示 html link，社交媒体图标显示如下：

<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 的新手，正在尝试弄清楚如何实现这一点。我将不胜感激任何指南。谢谢

Answer 1

虽然有一些方法可以将 HTML 的字符串注入 React 应用程序，但它们容易出错且很危险。

不要生成 HTML.

的字符串

您已经在使用 JSX，那也使用 JSX。

const socialMediaLinks=socialMediaHandles.map(handle => (
    <a href={handle.handle}>
        <i className={`bi-bi-${handle.type}`}></i>
    </a>
));

如何在 React 中将 link 文本解析为 html

How to parse link texts to html in React

html

reactjs

react-component