以下是我尝试过的方法,以及出错的地方。
如此:
<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。
有什么建议吗?
当前回答
// 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>")
其他回答
我使用innerHTML一起引用span:
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>
}
更新:
我删除了一些html状态,并添加了注释,以使示例更符合概念。
/**
* example how to retrieve a reference to an html object
*/
import React, { useRef, useEffect } from 'react';
/**
* this component can be used into another for example <Sample/>
*/
export default function Sample() {
/**
* 1) spanRef is now a React.RefObject<HTMLSpanElement>
* initially created with null value
*/
const spanRef = useRef<HTMLSpanElement>(null);
/**
* 2) later, when spanRef changes because html span element with ref attribute,
* follow useEffect hook will triggered because of dependent [spanRef].
* in an if ( spanRef.current ) that states if spanRef assigned to valid html obj
* we do what we need : in this case through current.innerHTML
*/
useEffect(() => {
if (spanRef.current) {
spanRef.current.innerHTML = "some <b>bold</b>";
}
}, [spanRef]);
return <div>
my custom text follows<br />
{/* ref={spanRef] will update the React.RefObject `spanRef` when html obj ready */}
<span ref={spanRef} />
</div>
}
我使用" 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等价物中。
this.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'));
结果:http://codepen.io/ilanus/pen/QKgoLA?editors=1011
但是如果description是<h1 style="color:red;">something</h1> without the quotes ",你会得到:
Object {
$$typeof: [object Symbol] {},
_owner: null,
key: null,
props: Object {
children: "something",
style: "color:red;"
},
ref: null,
type: "h1"
}
如果它是一个字符串,你没有看到任何HTML标记,我看到的唯一问题是错误的标记..
更新
如果你正在处理HTML实体,你需要解码他们之前发送他们到dangerlysetinnerhtml,这就是为什么它被称为“dangerous”:)
工作的例子:
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的dangerlysetinnerhtml方法
<div dangerouslySetInnerHTML={{\ __html: htmlsthtml} />
或者你可以用这个简单的方法实现更多:在React应用程序中渲染HTML原始
在我的例子中,我使用了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>")