blocks|key|6542|text|默认情况下，React转义HTML以防止XSS+(Cross-site+scripting)。如果您确实想呈现HTML，则可以使用dangerouslySetInnerHTML属性：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|6543|<td+dangerouslySetInnerHTML={{__html:+this.state.actions}}+/>|code-block|syntax|javascript|6544|React故意强制使用这种繁琐的语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。|6545|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/Cross-site_scripting|1|https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml^0|1T|N|K|Q|0|1T|N|1|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@$9|Z|A|10|1|11]|$9|12|A|13|1|14]]|E|$]]|$1|F|3|G|5|H|7|15|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|16|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]|U|$5|P|Q|R|E|$S|V]]]]

By default, React escapes the HTML to prevent <a href="https://en.wikipedia.org/wiki/Cross-site_scripting" rel="noreferrer">XSS (Cross-site scripting)</a>. If you really want to render HTML, you can use the <a href="https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml" rel="noreferrer"><code>dangerouslySetInnerHTML</code></a> property:

<pre><code>&lt;td dangerouslySetInnerHTML={{__html: this.state.actions}} /&gt;
</code></pre>

React forces this intentionally-cumbersome syntax so that you don't accidentally render text as HTML and introduce XSS bugs.

blocks|key|223221|text|npm+i+html-react-parser;

import+Parser+from+'html-react-parser';

<td>{Parser(this.state.archyves)}</td>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|223222|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>npm i html-react-parser;

import Parser from 'html-react-parser';

&lt;td&gt;{Parser(this.state.archyves)}&lt;/td&gt;
</code></pre>

blocks|key|223264|text|对于那些仍在尝试的人，npm安装了react-html-parser|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223265|当我安装它的时候，它每周有123628的下载量。|223266|import+ReactHtmlParser+from+'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>|code-block|syntax|javascript|223267|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

For those still experimenting, npm install react-html-parser

When I installed it it had 123628 weekly downloads.

<pre><code>import ReactHtmlParser from 'react-html-parser'

&lt;div&gt;{ReactHtmlParser(htmlString)}&lt;/div&gt;
</code></pre>

blocks|key|6563|text|我发现了这个js小提琴。它是这样工作的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6564|function+unescapeHTML(html)+{
++++var+escapeEl+=+document.createElement('textarea');
++++escapeEl.innerHTML+=+html;
++++return+escapeEl.textContent;
}

<textarea+className="form-control+redactor"
++++++++++++++++++++++++++rows="5"+cols="9"
++++++++++++++++++++++++++defaultValue={unescapeHTML(this.props.destination.description)}
++++++++++++++++++++++++++name='description'></textarea>|code-block|syntax|javascript|6565|jsfiddle链接|offset|length|6566|entityMap|0|LINK|mutability|MUTABLE|url|https://jsfiddle.net/Daniel_Hug/qPUEX/^0|0|0|0|8|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

i found this js fiddle. this works like this

<pre><code>function unescapeHTML(html) {
 var escapeEl = document.createElement('textarea');
 escapeEl.innerHTML = html;
 return escapeEl.textContent;
}

&lt;textarea className="form-control redactor"
 rows="5" cols="9"
 defaultValue={unescapeHTML(this.props.destination.description)}
 name='description'&gt;&lt;/textarea&gt;
</code></pre>

<a href="https://jsfiddle.net/Daniel_Hug/qPUEX/" rel="noreferrer">jsfiddle</a> link

blocks|key|6710|text|这可以通过使用放在这个块{[]}中的内容来解决，如下所示。为了更清楚起见，可以参考下面的示例。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|6711|{[
+++'abc',
+++my+bold,+
+++'some+other+text'
]}+|code-block|syntax|javascript|6712|这将保留标记下文本的格式，而其他文本将打印为纯文本。|6713|entityMap^0|C|4|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

This could have been solved by using the content put inside this block <code>{[]}</code> like this. Example could be referred below for better clarity.
<pre><code>{[
 'abc',
 &lt;b&gt;my bold&lt;/b&gt;, 
 'some other text'
]} 
</code></pre>
This would preserve the formatting for text under tags while the others would be printed as plain text.

blocks|key|6579|text|您也可以使用html-react-parser中的Parser()。我也用过同样的方法。Link共享。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|6580|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/remarkablemark/html-react-parser^0|18|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

You can also use Parser() from html-react-parser. 
I have used the same. <a href="https://github.com/remarkablemark/html-react-parser" rel="nofollow noreferrer">Link</a> shared.

blocks|key|6623|text|我开始使用名为react-html-parser的npm包|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6624|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

i start using npm package called react-html-parser

blocks|key|223330|text|如果您预先知道要呈现的字符串中有哪些标记；例如，如果在创建字符串的瞬间只允许使用某些标记，则可以使用Trans实用程序：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223331|import+{+Trans+}+from+'react-i18next'
import+React,+{+FunctionComponent+}+from+"react";

export+type+MyComponentProps+=+{
++++htmlString:+string
}

export+const+MyComponent:+FunctionComponent<MyComponentProps>+=+({
++htmlString
})+=>+{
++return+(
++++<div>
++++++<Trans
++++++++components={{
++++++++++b:+<b+/>,
++++++++++p:+<p+/>
++++++++}}
++++++>
++++++++{htmlString}
++++++</Trans>
++++</div>
++)
}|code-block|syntax|javascript|223332|然后您可以像往常一样使用它。|223333|<MyComponent
++++htmlString={'Hello+World'}
/>|223334|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If you know ahead what tags are in the string you want to render; this could be for example if only certain tags are allowed in the moment of the creation of the string; a possible way to address this is use the Trans utility:
<pre><code>import { Trans } from 'react-i18next'
import React, { FunctionComponent } from &quot;react&quot;;

export type MyComponentProps = {
 htmlString: string
}

export const MyComponent: FunctionComponent&lt;MyComponentProps&gt; = ({
 htmlString
}) =&gt; {
 return (
 &lt;div&gt;
 &lt;Trans
 components={{
 b: &lt;b /&gt;,
 p: &lt;p /&gt;
 }}
 &gt;
 {htmlString}
 &lt;/Trans&gt;
 &lt;/div&gt;
 )
}
</code></pre>
then you can use it as always
<pre><code>&lt;MyComponent
 htmlString={'&lt;p&gt;Hello &lt;b&gt;World&lt;/b&gt;&lt;/p&gt;'}
/&gt;
</code></pre>

I'm having trouble dealing with facebook's ReactJS. Whenever I do ajax and want to display an html data, ReactJS displays it as text. (See figure below)

<img src="https://i.stack.imgur.com/GK2ve.png" alt="ReactJS render string">

The data is displayed through the success callback function of the jquery Ajax.

<pre><code>$.ajax({
 url: url here,
 dataType: "json",
 success: function(data) {
 this.setState({
 action: data.action
 })
 }.bind(this)
});
</code></pre>

<img src="https://i.stack.imgur.com/52Tq1.png" alt="enter image description here">

Is there any easy way to convert this into html? How should I do it using ReactJS?

ReactJS convert HTML string to JSX

我在处理facebook的ReactJS时遇到了麻烦。每当我使用ajax并想要显示html数据时，ReactJS都会将其显示为文本。(见下图)​​数据通过jquery Ajax的成功回调函数显示。$.ajax({   url: url here,   dataType: "json",   success: function(data) {      this.setState({        

问ReactJS将HTML字符串转换为JSX
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS将HTML字符串转换为JSXEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问ReactJS将HTML字符串转换为JSX
EN