Question

我是新手，并且正在开发一个将json数据推送到模板的项目。

json结构

"description" : "Some text with a <a href=\"/de/datenschutz\">link</a> and another <a href=\"/de/cookie-richtlinie\">link</a>",

我建议在模板上使用以下内容

<p className='paragraph-margin-bottom-10 text--font-size-14 paragraph--justified' dangerouslySetInnerHTML={{ __html: lang.privacy[0].description }} />

但就输出而言 - 我可能需要在所有链接中添加一组类。这个

的最佳做法是什么？

所以链接使用以下

进行渲染

<a class="text--font-size-14 hyperlink-primary" href="#">link</a>

Answer 1

我可以想象很多人不会同意我的看法。你实际上可以做到这一点。但你不应该。您想要使用dangerouslySetInnerHTML已经够糟糕了。可以解析html，但是有许多边缘情况需要处理。

要么告诉你的后端他们应该使用适当的类返回链接，或者直接用css定位描述中的链接。

查看类似的问题：使用正则表达式解析HTML：为什么不呢？ Using regular expressions to parse HTML: why not?

我就是这样做的。如果遇到一些问题，我会在以后编写正则表达式。我现在没有太多时间闲暇。希望它会有所帮助。：）

import React from 'react';
import { render } from 'react-dom';


const htmlFromApi = 'some html from API'

const attachClassesToLinks = (htmlWithLinks) => {
  // do something special
  return htmlWithLinks
}

const App = () => (
  <div>
    <h1>My Component</h1>
    <p dangerouslySetInnerHTML={{ __html: attachClassesToLinks(htmlFromApi) }} />
  </div>
);

render(<App />, document.getElementById('root'));

reactjs dangerouslySetInnerHTML并动态地向链接添加类

1 个答案: