Chèn HTML với các câu lệnh biến phản ứng (JSX)

Tôi đang xây dựng một cái gì đó với React nơi tôi cần chèn HTML với React Variabled trong JSX. Có cách nào để có một biến như vậy không:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

và để đưa nó vào phản ứng như vậy, và nó có hoạt động không?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

và có chèn HTML như mong đợi không? Tôi chưa thấy hoặc nghe thấy bất cứ điều gì về một chức năng phản ứng có thể thực hiện nội tuyến này hoặc phương pháp phân tích cú pháp những thứ sẽ cho phép điều này hoạt động.

Bạn có thể sử dụng nguy hiểmInInnerHTML , vd

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

Lưu ý rằng dangerouslySetInnerHTMLcó thể nguy hiểm nếu bạn không biết những gì trong chuỗi HTML bạn đang tiêm. Điều này là do mã phía máy khách độc hại có thể được tiêm thông qua các thẻ script.

Có lẽ là một ý tưởng tốt để vệ sinh chuỗi HTML thông qua một tiện ích như DOMPurify nếu bạn không chắc chắn 100% HTML mà bạn đang hiển thị là XSS (kịch bản chéo trang) an toàn.

Thí dụ:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

nguy hiểm SetInnerHTML có nhiều bất lợi vì nó được đặt bên trong thẻ.

Tôi đề nghị bạn sử dụng một số trình bao bọc phản ứng như tôi đã tìm thấy ở đây trên npm cho mục đích này. html-Reac-Parser thực hiện cùng một công việc.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Rất đơn giản :)

Bằng cách sử dụng, ''bạn đang làm cho nó thành chuỗi. Sử dụng mà không có dấu phẩy đảo ngược nó sẽ hoạt động tốt.

Để tránh lỗi kẻ nói dối, tôi sử dụng nó như thế này:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

Bằng cách sử dụng '', đặt giá trị thành một chuỗi và React không có cách nào biết rằng đó là một phần tử HTML. Bạn có thể làm như sau để cho React biết đó là một phần tử HTML -

1. Hủy bỏ ''và nó sẽ làm việc
2. Sử dụng <Fragment>để trả về một phần tử HTML.

Nếu ai khác vẫn hạ cánh ở đây. Với ES6, bạn có thể tạo biến html của mình như vậy:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

Bạn cũng có thể đưa HTML này vào ReactDOM như thế này:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Dưới đây là hai liên kết liên kết và link2 từ tài liệu React có thể hữu ích.