使用 React 将 HTML 元素插入 DOM答案

【问题标题】：Insert HTML element into DOM with React使用 React 将 HTML 元素插入 DOM
【发布时间】：2017-08-26 08:07:36
【问题描述】：

我正在使用正则表达式来使用双下划线来加粗字符。这是我的正则表达式，它有效：

"I'm making __this__ bold".replace(/\__([^*]+)\__/g,"<b>$1</b>");

这给了我这个：

"I'm making <b>this</b> bold"

但是我如何让它与 React 一起工作呢？我有以下代码，但不起作用：

 {cars.map(car => {
   return (
    <div>
     <p>{car.description.replace(/\__([^*]+)\__/g,"<b>$1</b>")}</p>
    </div>         
  )})}

在这种情况下，{car.description} 例如：

   "The __Audi RS 6 quattro__, commonly referred to as __the RS6__"

我希望它显示为：

“Audi RS 6 quattro，通常称为RS6”

编辑：

有了这个

  <p>{car.description.replace(/\__([^*]+)\__/g,"<b>$1</b>")}</p>

我得到一个字符串：

   "The <b>Audi RS 6 quattro</b>, ..."

但是如何让 JSX 识别以将其显示为粗体，而不是前端的
标签？

【问题讨论】：

请试试这个，<p>{car.description.replace(/\__([^*]+)\__/g,"<b>$1</b>")}</p>
why and how

标签： javascript regex reactjs

【解决方案1】：

你需要的是dangerouslySetInnerHTML

{cars.map(car => {
   var description = car.description.replace(/\__([^*]+)\__/g,"<b>$1</b>");
   return (
    <div>
     <p dangerouslySetInnerHTML={{__html: description}}/>
    </div>         
  )})}

示例 sn-p

const App = () => {
   var car = "I'm making __this__ bold";
   var newCar = car.replace(/\__([^*]+)\__/g,"<b>$1</b>");
   return (
       <div dangerouslySetInnerHTML={{__html: newCar}} />
   )
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

【讨论】：

如果description 包含& 或< 等字符怎么办？

【解决方案2】：

我建议不要使用dangerouslySetInnerHTML，正如其名称所暗示的那样，它很危险（如果car.description 包含诸如& 或< 之类的字符，则输出将不是您所期望的）。

您可以生成自己的元素：

return (
  <p>{car.description.split('__').map((v, i) => i % 2 ? <b key={i}>{v}</b> : v)}</p>
);

【讨论】：