Javascript 在React组件中将HTML字符串呈现为真实HTML

以下是我尝试过的，以及它是如何出错的

这项工作：

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

这并不是：

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

---

description属性只是HTML内容的普通字符串。但是，由于某些原因，它被呈现为字符串，而不是HTML

---

有什么建议吗？

这个.props.match.description是字符串还是对象？如果它是一个字符串，它应该被转换成HTML。例如：

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }
  
  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

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

如果它是一个字符串，而您没有看到任何HTML标记，那么我看到的唯一问题就是错误的标记

更新

如果您处理的是HTML实体，则需要先对它们进行解码，然后再将它们发送到

DangerouslySetinerHTML

，这就是为什么称之为“dangerously”：

工作示例：

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

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

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
描述：“pstrong我们的机会：/strong/p”
}
}
HTMLDE代码（输入）{
var e=document.createElement（'div'）；
e、 innerHTML=输入；
返回e.childNodes.length==0？“：e.childNodes[0].nodeValue；
}
render（）{
返回(
);
}
}
ReactDOM.render（，document.getElementById（'root'））；

检查您试图附加到节点的文本是否未按如下方式转义：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

与此相反：

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

var prop={
匹配：{
描述：“你好！”
}
};

如果是转义的，您应该从服务器端转换它

节点为文本，因为已转义

---

该节点是一个dom节点，因为它不是转义的

如果您可以控制包含html的字符串的来源（即应用程序中的某个地方），您可以从新的

API中获益，可以执行以下操作：

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

import React，{Fragment}来自“React”
常量stringsSomeWithHtml={
测试一：(
某些文本用strong包装
),
testTwo:'这只是一个普通字符串，但它也可以很好地打印出来'，
}
...
render（）{
返回{stringsSomeWithHtml[prop.key]}
}

我使用“react html解析器”

yarn add react-html-parser

从'react html parser'导入ReactHtmlParser'；
{reactHTMLPasser（html_字符串）}

来源

提升@okram的评论以获得更多关注：

从其github描述：将HTML字符串直接转换为React 避免使用危险的LysetinerHTML的组件 npmjs.com用于将HTML字符串转换为React组件的实用程序。 避免使用危险的HTML并转换标准HTML 将元素、属性和内联样式转换为它们的等效项

---

如果您拥有对{this.props.match.description}的控制权，并且正在使用JSX。我建议不要使用“危险的Html”

//在JSX中，可以定义html对象而不是字符串来包含原始html
让描述=你好！；
//这是你打印的方式
返回(
{说明}
);

您只需使用危险的LysetinerHTML反应方法

---

或者，您可以用这种简单的方法实现更多功能：

我无法使用

npm build

来使用

react html解析器。然而，就我而言，我成功地利用了。我需要显示几个html unicode字符，但它们不应该直接嵌入JSX中。在JSX中，它必须从组件的状态中选取。组件代码片段如下所示：

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

constructor（）
{
此.state={
rankMap:{“5”：★；★；★；★；★；★，
"4" : ★ ★ ★ ★ ☆, 
"3" : ★ ★ ★ ☆ ☆ , 
"2" : ★ ★ ☆ ☆ ☆, 
"1" : ★ ☆ ☆ ☆ ☆}
};
}
render（）
{
返回(
{this.state.rankMap[“5”]}
);
}
在我的例子中，我使用

首先通过
npm i--save react render html安装程序包

那么

从“react render html”导入renderHTML；
renderHTML（“”）
我使用

const HtmlToReactParser=require（'html-to-react'）。解析器；
让htmlInput=html.template；
让htmlToReactParser=新的htmlToReactParser（）；
让reactElement=htmlToReactParser.parse（htmlInput）；
返回（{reactElement}）
我将innerHTML与一个引用一起使用，以跨越：

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

import React，{useRef，useffect，useState}来自'React'；
导出默认函数示例（）{
const spanRef=useRef（null）；
const[someHTML，]=useState（“somebold”）；
useffect（（）=>{
如果（spanRef.current）{
spanRef.current.innerHTML=someHTML；
}
}，[spanRef.current，someHTML]）；
返回
下面是我的自定义文本

}
如果字符串中有HTML，我建议使用名为
HTML react parser
的包

安装它：
npm安装html-react解析器
或者，如果您使用thread，
thread添加html-react解析器

像这样使用它

import parse from'html react parser'
const yourHtmlString='Hello'


{parse（yourthtmlstring）}

参考资料：
您也可以使用跳线包中的parseReactHTMLComponent。看看它，这很简单，而且不需要使用JSX语法


有关跳线的更多信息：


NPM包：

此.props.match.description
是字符串，而不是对象。错误的标记是什么意思？你是说未关闭的标签吗？React应该只是呈现它否？你能在这里粘贴console.log（this.props.match.description）；例如：
pstrong您的机会：/strong/p
在这种情况下，您需要使用.innerHTML或解码HTMLEntities。返回多行或带有标记的HTML代码：function htmlDecode（input）{var e=document.createElement（'div'）；e.innerHTML=input；var returnString=''；for（index=0；index// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}