Json reactjs危险地将类添加到HTML和链接中

我是reactjs新手，正在从事一个将json数据推送到模板的项目

json结构

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

“description”：“一些文本带有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>

---

我可以想象很多人不会同意我的观点。你可以做到这一点。但你不应该。您想使用

危险的setinenerHTML

已经够糟糕的了。可以解析html，但您需要处理许多边缘情况

告诉你的后端，他们应该返回带有适当类的链接，或者直接用css将描述中的链接作为目标

请看一些类似的问题，如：使用正则表达式解析HTML：为什么不？

我会这样做的。如果遇到一些问题，我将稍后编写正则表达式。我现在没有多少空闲时间。希望能有所帮助。：）

从“React”导入React；
从'react dom'导入{render}；
const htmlFromApi='some html from API'
常量attachClassesToLinks=（htmlWithLinks）=>{
//做点特别的事
返回htmlWithLinks
}
常量应用=（）=>(
我的组件

);
render（，document.getElementById（'root'））；

我可以想象很多人不会同意我的观点。你可以做到这一点。但你不应该。您想使用

危险的setinenerHTML

已经够糟糕的了。可以解析html，但您需要处理许多边缘情况

告诉你的后端，他们应该返回带有适当类的链接，或者直接用css将描述中的链接作为目标

请看一些类似的问题，如：使用正则表达式解析HTML：为什么不？

我会这样做的。如果遇到一些问题，我将稍后编写正则表达式。我现在没有多少空闲时间。希望能有所帮助。：）

从“React”导入React；
从'react dom'导入{render}；
const htmlFromApi='some html from API'
常量attachClassesToLinks=（htmlWithLinks）=>{
//做点特别的事
返回htmlWithLinks
}
常量应用=（）=>(
我的组件

);
render（，document.getElementById（'root'））；

不是一个真正的解决方案，但是你能不能根本不给

元素类？相反，将您的类赋予外部

并相应地调整您的css。它的引导不是一个真正的解决方案，但您能否将类赋予

元素？相反，将您的类交给外部

，并相应地调整您的css。它的引导initwell使用regex似乎更适合这种情况，最终它取决于您的需要。例如，如果您可以确保从API获得的所有链接都没有atribute类。那就容易了。如果你需要知道链接是否有atribute类，这将变得更加困难。如果类atribute中有任何值。等等。：）如果我在这个问题上使用正则表达式--我将如何操作--执行componentDidMount？const attachClassesToLinks=（htmlWithLinks）=>{//do something special return htmlWithLinks.replace（/你怎么认为-使用regex似乎有点像borkywell，最终它会根据你的需要而定制。例如，如果你能确保从API获得的所有链接都不会有类atribute。那么这将很容易。但是如果你需要确定链接是否有类atribute，这将变得更加困难atribute。如果类atribute中有任何值。依此类推。：）如果我在这上面使用正则表达式--我该怎么做--做一个componentDidMount？const attachClassesToLinks=（htmlWithLinks）=>{//做一些特殊的事情返回htmlWithLinks.replace（/你认为呢-这有点像borky

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