用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中重写所有这些。

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

Answer 1

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

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

Answer 2

现在有更安全的方法来呈现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'}} />

Answer 3

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

Answer 4

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

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

Answer 5

我试过这个纯粹的组件：

 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

Answer 6

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

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