我在处理facebook的ReactJS时遇到了麻烦。每当我使用ajax并想要显示html数据时，ReactJS将其显示为文本。(见下图)
数据通过jquery Ajax的成功回调函数显示。
$.ajax({
url: url here,
dataType: "json",
success: function(data) {
this.setState({
action: data.action
})
}.bind(this)
});
有没有什么简单的方法把它转换成html?我应该如何使用ReactJS?
当前回答
如果你提前知道你想呈现的字符串中有哪些标签;例如，如果在创建字符串时只允许某些标记;解决这个问题的一个可能的方法是使用Trans实用程序:
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>
)
}
然后你就可以一如既往地使用它了
<MyComponent
htmlString={'<p>Hello <b>World</b></p>'}
/>
其他回答
默认情况下，React会转义HTML以防止XSS(跨站脚本)。如果你真的想渲染HTML，你可以使用dangerlysetinnerhtml属性:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
React强制使用这种有意为之的繁琐语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。
如果你提前知道你想呈现的字符串中有哪些标签;例如，如果在创建字符串时只允许某些标记;解决这个问题的一个可能的方法是使用Trans实用程序:
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>
)
}
然后你就可以一如既往地使用它了
<MyComponent
htmlString={'<p>Hello <b>World</b></p>'}
/>
对于那些还在尝试的人，npm安装react-html-parser
当我安装它时，它的周下载量是123628次。
import ReactHtmlParser from 'react-html-parser'
<div>{ReactHtmlParser(htmlString)}</div>
现有答案中缺少的一个选项是使用<React。片段>(在React v16及更高版本中可用)。我认为这是最好的，因为它允许您将任何html元素存储为JSX变量，并在以后引用它。也因为使用dangerlysetinnerhtml是不安全的。
例如
const App = () => { const Windows = <React。Fragment>Microsoft <abbr title="Operating System">OS</abbr></React. bat。片段> 回报( < ul > <李> {Windows} < /李> < / ul > ）; }; ReactDOM。render(<App />， document.getElementById("root")); < script src = " https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js " > < /脚本> < script src = " https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js " > < /脚本> < div id = "根" > < / div >
其他选择和考虑:
If you're fetching the HTML from external sources, then you cannot use this approach because the fetched HTML will be in a string format. In that case you need to parse the HTML using a HTML Parser like html-react-parser If you don't have any keys or attributes, you can also use <></> which is a shorthand for <React.Fragment></React.Fragment> Keep in mind that dangerouslySetInnerHTML is dangerous to use because malicious client side code can be injected via script tags: @Brett has also suggested other alternatives: Note: using quotes in a JSX Variale You should not surround a JSX variable with quotes (like a regular variable) - you should surround it with <React.Fragment> </ React.Fragment> you should not escape quotes in a html tag of a JSX variable - for example the title in <abbr /> tag above has quotes which are not escaped.
npm i html-react-parser;
import Parser from 'html-react-parser';
<td>{Parser(this.state.archyves)}</td>
