Question

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

"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__"

我希望它显示为：

“奥迪RS 6 quattro ，通常称为 RS6 ”

编辑：

有了这个

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

我找回了一个字符串：

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

但是如何让JSX认识到它显示为粗体，而不是前端的标签呢？

Answer 1

您需要的是dangerouslySetInnerHTML

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

示例代码段

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>

Answer 2

我建议您不要使用dangerouslySetInnerHTML，这很危险-顾名思义，这是危险的（如果car.description包含诸如&或{ {1}}。

您可以改为生成自己的元素：

使用React将HTML元素插入DOM

编辑：

2 个答案: