使用reactjs渲染原始html

所以这是唯一的方式来渲染原始html与reactjs?

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

也许我想错了。请纠正我。

当前回答

我使用了这个名为Parser的库。它满足了我的需要。

import React, { Component } from 'react';    
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};

2018-10-24 01:42:56

其他回答

我使用了这个名为Parser的库。它满足了我的需要。

import React, { Component } from 'react';    
import Parser from 'html-react-parser';

class MyComponent extends Component {
  render() {
    <div>{Parser(this.state.message)}</div>
  }
};

2018-10-24 01:42:56

使用类似DOMPurify的东西来净化原始html，然后使用dangerlysetinnerhtml会更安全

我喜欢净化

的类型

NPM I—save-dev @types/dompurify

import React from React import * as DOMPurify from DOMPurify; Let dirty = '<b>hello there</b>'; 净化。消毒(脏的); 函数MyComponent() { return <div dangerlysetinnerhtml ={{__html: clean)}} />; ｝

如果在您的特定设置中有问题，可以考虑考虑惊人的isomorphic-dompurify项目，它可以解决人们可能遇到的许多问题。

NPM I同构-dompurify

import React from React 从isomorphic-dompurify导入DOMPurify; Const dirty = '<p>hello</p>' const clean = dompurification .sanitize(脏的); 函数MyComponent() { return <div dangerlysetinnerhtml ={{__html: clean)}} />; ｝

为演示 https://cure53.de/purify

更多的 https://github.com/cure53/DOMPurify

https://github.com/kkomelin/isomorphic-dompurify

2022-08-17 18:12:34

这对我来说很管用:

    render()
    {
        var buff = '';
        for(var k=0; k<10; k++)
        {
            buff += "<span> " + k + " </span>";
        }

        return (
            <div className='pagger'>               
                  <div className='pleft'>
                     <div dangerouslySetInnerHTML={{__html: buff }} />
                  </div>
                  <div className='pright'>
                         <div className='records'>10</div>
                         <div className='records'>50</div>
                         <div className='records records_selected'>100</div>
                         <div className='records'>1000</div>
                     </div>
            </div>
        )
    }

2022-08-05 07:48:44

我试过这个纯成分:

const RawHTML = ({children, className = ""}) => 
<div className={className}
  dangerouslySetInnerHTML={{ __html: children.replace(/\n/g, '<br />')}} />

特性

接受classNameprop(更容易设置样式) 将\n替换为<br />(您通常希望这样做) 在使用组件时将内容作为子组件，如下所示: < RawHTML > {myHTML} < / RawHTML >

我已经在Github: RawHTML: ReactJS纯组件中放置了该组件来渲染HTML

2017-08-22 06:31:43

我需要在我的头脑中使用一个带有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>`,}}/>

2018-10-31 05:38:45

使用reactjs渲染原始html

推荐文章

最新文章

标签