React/Javascript显示API数据显示硬编码链接而不是超链接？

Question

所以我把这个API搞得乱七八糟，对于描述，它有像<a href="/">Bunch of words</a>一样的硬编码链接，所以它在我的浏览器上准确地显示了这一点。我如何在我的应用程序中显示描述以使其看起来正常？

以下是https://api.coingecko.com/api/v3/coins/bitcoin接口

这只是一种简单的方式，我得到了描述来显示

const Tokens = ({coin}) => {
 return (
      <p>{coin.description.en}</p>
  )
 }

这将最终在浏览器上显示所有的a标记，而不是将它们转换为可点击的链接

  <a href=\"https://www.coingecko.com/en/coins/peercoin\">Peercoin</a>, <a href=\"https://www.coingecko.com/en/coins/primecoin\">Primecoin</a>, and so on.\r\n\r\nThe cryptocurrency then took off with the innovation of the turing-complete smart contract by <a href=\"https://www.coingecko.com/en/coins/ethereum\">Ethereum</a> which led to the development of other amazing projects such as <a href=\"https://www.coingecko.com/en/coins/eos\">EOS</a>, <a href=\"https://www.coingecko.com/en/coins/tron\">Tron</a>, and even crypto-collectibles such as <a href=\"https://www.coingecko.com/buzz/ethereum-still-king-dapps-cryptokitties-need-1-billion-on-eos\">CryptoKitties</a>.",

有没有办法显示描述，让它看起来像一个普通的带有超链接的段落，而不是字面上显示硬编码的标签？

此外，如果我只想像前两句话那样显示，我该如何剪切段落的其余部分？

Answer 1

正如雅各布所说，您可以通过使用插值字符串文字来使用dangerouslySetInnerHTML属性。

const apiResponse = `<a href=\"https://www.coingecko.com/en/coins/peercoin\">Peercoin</a>, <a href=\"https://www.coingecko.com/en/coins/primecoin\">Primecoin</a>, and so on.\r\n\r\nThe cryptocurrency then took off with the innovation of the turing-complete smart contract by <a href=\"https://www.coingecko.com/en/coins/ethereum\">Ethereum</a> which led to the development of other amazing projects such as <a href=\"https://www.coingecko.com/en/coins/eos\">EOS</a>, <a href=\"https://www.coingecko.com/en/coins/tron\">Tron</a>, and even crypto-collectibles such as <a href=\"https://www.coingecko.com/buzz/ethereum-still-king-dapps-cryptokitties-need-1-billion-on-eos\">CryptoKitties</a>."`
...
<p dangerouslySetInnerHTML={{__html: apiResponse}}></p>.

但是，\r和\n不能被超文本标记语言所理解。您可以将这些空格字符替换为HTML可以理解的unicode转义序列，如下所示：

const cleanedAPIResponse = apiResponse.replace("\n", "<br\>").replace("\r", "\u000D");
...
<p dangerouslySetInnerHTML={{__html: cleanedAPIResponse}}></p>.

注意:对这些替代方案不是很确定。仅供参考，\r被称为“回车”。

如果你只想要前两句话，一个想法是搜索‘’的第二个实例。在API响应中。然后，您可以截断字符串文字的其余部分，并根据从左到右排列的标记的外观附加适当的结束标记，这些标记在字符串中还没有匹配的结束标记。