用reactjs渲染原始html

那么这是唯一的方式来呈现与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中重写所有这些。

也许我在想这一切都是错的。 请纠正我

您可以利用https://www.npmjs.com/package/html-to-react上的;html-to-react npm模块。

注:我是该模块的作者,几个小时前刚刚发布。 请随时报告任何错误或可用性问题。

现在有更安全的方法来呈现HTML。 我在前面的答案中提到了这个 。 你有4个选项,最后使用dangerouslySetInnerHTML

呈现HTML的方法

  1. 最简单 – 使用Unicode,将文件保存为UTF-8并将charset设置为UTF-8。

    <div>{'First · Second'}</div>

  2. 更安全 – 在Javascriptstring内使用Unicode编号。

    <div>{'First \u00b7 Second'}</div>

    要么

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. 或者是一个带有string和JSX元素的混合数组。

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. Last Resort – 使用dangerouslySetInnerHTML插入原始HTML。

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

 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> ) } } 

我在快速和肮脏的情况下使用这个:

 // 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 prop(更容易devise)
  • \nreplace为<br /> (您经常要这么做)
  • 将内容放置为孩子时使用组件如:
  • <RawHTML>{myHTML}</RawHTML>

我已经把组件放在Github的Gist: RawHTML:ReactJS纯组件来呈现HTML

除非绝对必要,否则不应使用SetInnerHTML。 根据文档, “这主要是与DOMstring操作库合作” 。 当你使用它的时候,你放弃了React的DOMpipe理的好处。

在你的情况下,转换为JSX有效的语法非常简单,只需将class属性更改为className 。 或者,正如在上面的评论中提到的那样,您可以使用将Bootstrap元素封装到React组件中的ReactBootstrap库