Hiển thị html thô với reactjs

Question

Vì vậy, đây có phải là cách duy nhất để hiển thị html thô với reactjs không?

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

Tôi biết có một số cách thú vị để đánh dấu nội dung với JSX, nhưng tôi chủ yếu quan tâm đến việc có thể hiển thị html thô (với tất cả các lớp, kiểu nội tuyến, v.v.). Một cái gì đó phức tạp như thế này:

<!-- 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> 

Tôi sẽ không muốn viết lại tất cả điều đó trong JSX.

Có lẽ tôi đang nghĩ về điều này tất cả đều sai. Hãy sửa tôi.

Answer 1

Bạn có thể tận dụng các module html-to-react NPM tại https://www.npmjs.com/package/html-to-react.

Lưu ý: Tôi là tác giả của mô-đun và vừa xuất bản nó một vài giờ trước. Vui lòng báo cáo bất kỳ lỗi hoặc vấn đề khả năng sử dụng nào.

Answer 2

dangerouslySetInnerHTML không nên được sử dụng trừ khi thật cần thiết. Theo tài liệu, "This is mainly for cooperating with DOM string manipulation libraries". Khi bạn sử dụng nó, bạn từ bỏ lợi ích của việc quản lý DOM của React.

Trong trường hợp của bạn, việc chuyển đổi sang cú pháp hợp lệ JSX khá đơn giản, chỉ cần thay đổi các thuộc tính class thành className. Hoặc, như đã đề cập trong các nhận xét ở trên, bạn có thể sử dụng thư viện ReactBootstrap để gói gọn các phần tử Bootstrap vào các thành phần React

Answer 3

Hiện có các phương pháp an toàn hơn để hiển thị HTML. Tôi đã đề cập đến điều này trong câu trả lời trước here. Bạn có 4 tùy chọn, lần sử dụng cuối cùng dangerouslySetInnerHTML.

Phương pháp render HTML

1. dễ nhất - Sử dụng Unicode, lưu file dưới dạng UTF-8 và thiết lập charset sang UTF-8.

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

2. Safer - Sử dụng số Unicode cho các thực thể bên trong một chuỗi Javascript.

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

   hoặc

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

3. Hoặc một mảng hỗn hợp với chuỗi và các yếu tố JSX.

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

4. Last Resort - Chèn HTML liệu sử dụng dangerouslySetInnerHTML.

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

Answer 4

Tôi đã sử dụng này trong các tình huống nhanh chóng và dơ bẩn:

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

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 6

Tôi đã thử thành phần này tinh khiết:

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

Tính năng

• Đưa className prop (dễ dàng hơn để định dạng)
• Thay thế \n-<br /> (bạn thường muốn làm điều đó)
• nội dung Nơi như trẻ em khi sử dụng các thành phần như:
• <RawHTML>{myHTML}</RawHTML>

Tôi có đặt thành phần trong Gist tại Github: RawHTML: ReactJS pure component to render HTML