以下是我尝试过的方法,以及出错的地方。
如此:
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不是:
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description属性只是一个普通的HTML内容字符串。然而,由于某些原因,它被呈现为字符串,而不是HTML。
有什么建议吗?
以下是我尝试过的方法,以及出错的地方。
如此:
<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />
这不是:
<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />
description属性只是一个普通的HTML内容字符串。然而,由于某些原因,它被呈现为字符串,而不是HTML。
有什么建议吗?
当前回答
我使用" react-html-parser "
yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser';
<div> { ReactHtmlParser (html_string) } </div>
来源npmjs.com
提升@okram的评论以提高能见度:
从它的github描述:转换HTML字符串直接到React 组件避免使用危险的setinnerhtml 一个将HTML字符串转换为React组件的实用程序。 避免使用dangerlysetinnerhtml并转换标准HTML 元素,属性和内联样式到它们的React等价物中。
其他回答
在我的例子中,我使用了react-render-html
首先通过npm i安装这个包——save react-render-html
然后,
import renderHTML from 'react-render-html';
renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")
我使用" react-html-parser "
yarn add react-html-parser
import ReactHtmlParser from 'react-html-parser';
<div> { ReactHtmlParser (html_string) } </div>
来源npmjs.com
提升@okram的评论以提高能见度:
从它的github描述:转换HTML字符串直接到React 组件避免使用危险的setinnerhtml 一个将HTML字符串转换为React组件的实用程序。 避免使用dangerlysetinnerhtml并转换标准HTML 元素,属性和内联样式到它们的React等价物中。
// For typescript import parse, { HTMLReactParserOptions } from "html-react-parser"; import { Element } from "domhandler/lib/node"; export function contentHandler(postContent: string) { const options: HTMLReactParserOptions = { replace: (domNode: Element) => { if (domNode.attribs) { if (domNode.attribs.id === 'shortcode') { return <div className="leadform">Shortcode</div>; } } }, }; return parse(postContent, options); } // Usage: contentHandler("<span>Hello World!</span>")
我不能让npm构建与react-html-parser一起工作。然而,在我的情况下,我能够成功地利用https://reactjs.org/docs/fragments.html。我需要显示一些html unicode字符,但它们不应该直接嵌入到JSX中。在JSX中,它必须从组件的状态中选择。组件代码片段如下:
constructor()
{
this.state = {
rankMap : {"5" : <Fragment>★ ★ ★ ★ ★</Fragment> ,
"4" : <Fragment>★ ★ ★ ★ ☆</Fragment>,
"3" : <Fragment>★ ★ ★ ☆ ☆</Fragment> ,
"2" : <Fragment>★ ★ ☆ ☆ ☆</Fragment>,
"1" : <Fragment>★ ☆ ☆ ☆ ☆</Fragment>}
};
}
render()
{
return (<div class="card-footer">
<small class="text-muted">{ this.state.rankMap["5"] }</small>
</div>);
}
我使用https://www.npmjs.com/package/html-to-react
const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput);
return(<div>{reactElement}</div>)