那么这是用reactjs渲染原始html的唯一方法吗?
// http://facebook.github.io/react/docs/tutorial.html
// tutorial7.js
var converter = new Showdown.converter();
var Comment = React.createClass({
render: function() {
var rawMarkup = converter.makeHtml(this.props.children.toString());
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html: rawMarkup}} />
</div>
);
}
});
我知道有一些很酷的方法来用JSX标记内容,但是我主要感兴趣的是能够呈现原始html(包括所有类,内联样式等)。像这样复杂的东西:
<!-- http://getbootstrap.com/components/#dropdowns-example -->
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
我不想在JSX中重写所有内容。
也许我在想这一切错。请纠正我。
您可以利用html-to-react
npm模块。
注意:我是该模块的作者,几小时前刚刚发布了该模块。请随时报告任何错误或可用性问题。
现在有更安全的方法来呈现HTML。我在这里以前的回答中对此进行了介绍。您有4个选择,最后一个使用dangerouslySetInnerHTML
。
呈现HTML的方法
-
最简单-使用Unicode,将文件另存为UTF-8并将其设置
charset
为UTF-8。<div>{'First · Second'}</div>
-
更安全-在Javascript字符串中为实体使用Unicode数字。
<div>{'First \u00b7 Second'}</div>
要么
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>
-
或包含字符串和JSX元素的混合数组。
<div>{['First ', <span>·</span>, ' Second']}</div>
-
不得已-使用插入原始HTML
dangerouslySetInnerHTML
。<div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
我在快速和肮脏的情况下使用了此方法:
// react render method:
render() {
return (
<div>
{ this.props.textOrHtml.indexOf('</') !== -1
? (
<div dangerouslySetInnerHTML={{__html: this.props.textOrHtml.replace(/(<? *script)/gi, 'illegalscript')}} >
</div>
)
: this.props.textOrHtml
}
</div>
)
}
我已经尝试过这个纯组件:
const RawHTML = ({children, className = ""}) =>
<div className={className}
dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />
特征
- 拿起
className
道具(更轻松地设置样式) - 替换
\n
为<br />
(您通常想这样做) - 使用以下组件时,将内容作为子元素放置:
<RawHTML>{myHTML}</RawHTML>
我已将该组件放置在Github的要点中:RawHTML:ReactJS纯组件来呈现HTML
angerouslySetInnerHTML是React在浏览器DOM中使用innerHTML的替代。通常,从代码设置HTML是有风险的,因为很容易无意间使您的用户遭受跨站点脚本(XSS)攻击。
在将原始HTML通过注入DOM之前,最好对它进行清理(使用DOMPurify等)dangerouslySetInnerHTML
。
DOMPurify-用于HTML,MathML和SVG的纯DOM,超快速,超耐性XSS消毒剂。DOMPurify使用安全默认值工作,但是提供了许多可配置性和挂钩。
范例:
import React from 'react'
import createDOMPurify from 'dompurify'
import { JSDOM } from 'jsdom'
const window = (new JSDOM('')).window
const DOMPurify = createDOMPurify(window)
const rawHTML = `
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul>
</div>
`
const YourComponent = () => (
<div>
{ <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(rawHTML) }} /> }
</div>
)
export default YourComponent
export class ModalBody extends Component{
rawMarkup(){
var rawMarkup = this.props.content
return { __html: rawMarkup };
}
render(){
return(
<div className="modal-body">
<span dangerouslySetInnerHTML={this.rawMarkup()} />
</div>
)
}
}
我使用了这个名为Parser的库。它满足了我的需求。
import React, { Component } from 'react';
import Parser from 'html-react-parser';
class MyComponent extends Component {
render() {
<div>{Parser(this.state.message)}</div>
}
};
dangerouslySetInnerHTML
除非绝对必要,否则请勿使用。根据文档,“这主要是用于与DOM字符串操作库进行协作”。使用它时,您将放弃React的DOM管理的好处。
就您而言,转换为有效的JSX语法非常简单;只需将class
属性更改为即可className
。或者,如上面的评论所述,您可以使用ReactBootstrap库,该库将Bootstrap元素封装到React组件中。
这是之前发布的RawHTML函数的一些观点。它可以让您:
- 配置标签
- (可选)将换行符替换为
<br />
的 - 传递RawHTML将传递给创建的元素的额外道具
- 提供一个空字符串(
RawHTML></RawHTML>
)
这是组件:
const RawHTML = ({ children, tag = 'div', nl2br = true, ...rest }) =>
React.createElement(tag, {
dangerouslySetInnerHTML: {
__html: nl2br
? children && children.replace(/\n/g, '<br />')
: children,
},
...rest,
});
RawHTML.propTypes = {
children: PropTypes.string,
nl2br: PropTypes.bool,
tag: PropTypes.string,
};
用法:
<RawHTML>{'First · Second'}</RawHTML>
<RawHTML tag="h2">{'First · Second'}</RawHTML>
<RawHTML tag="h2" className="test">{'First · Second'}</RawHTML>
<RawHTML>{'first line\nsecond line'}</RawHTML>
<RawHTML nl2br={false}>{'first line\nsecond line'}</RawHTML>
<RawHTML></RawHTML>
输出:
<div>First · Second</div>
<h2>First · Second</h2>
<h2 class="test">First · Second</h2>
<div>first line<br>second line</div>
<div>first line
second line</div>
<div></div>
它将中断:
<RawHTML><h1>First · Second</h1></RawHTML>
我需要在头上使用带有onLoad属性的链接,不允许使用div,这给我造成了极大的痛苦。我当前的解决方法是关闭原始脚本标签,执行我需要做的,然后打开脚本标签(由原始脚本关闭)。希望这会对绝对没有其他选择的人有所帮助:
<script dangerouslySetInnerHTML={{ __html: `</script>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Open+Sans" as="style" onLoad="this.onload=null;this.rel='stylesheet'" crossOrigin="anonymous"/>
<script>`,}}/>
文章标签:javascript , reactjs
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!