Kết xuất chuỗi HTML dưới dạng HTML thực trong thành phần React

Đây là những gì tôi đã cố gắng và làm thế nào nó đi sai.

Những công việc này:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Đây không phải là:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

Thuộc tính mô tả chỉ là một chuỗi nội dung HTML bình thường. Tuy nhiên, nó được kết xuất dưới dạng một chuỗi, không phải là HTML vì một số lý do.

Bất kỳ đề xuất?

Kiểm tra xem văn bản bạn đang cố nối vào nút không được thoát như thế này:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

Thay vì điều này:

var prop = {
    match: {
        description: '<h1>Hi there!</h1>'
    }
};

nếu được thoát, bạn nên chuyển đổi nó từ phía máy chủ của bạn.

Nút là văn bản vì được thoát

Nút là một nút dom vì không thoát được

Liệu this.props.match.descriptioncó phải là một chuỗi hoặc một đối tượng? Nếu đó là một chuỗi, nó sẽ được chuyển đổi thành HTML. Thí dụ:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: '<h1 style="color:red;">something</h1>'
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Kết quả: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Tuy nhiên nếu description: <h1 style="color:red;">something</h1>không có trích dẫn ''bạn sẽ nhận được:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Nếu đó là một chuỗi và bạn không thấy bất kỳ đánh dấu HTML nào, vấn đề duy nhất tôi thấy là đánh dấu sai ..

CẬP NHẬT

Nếu bạn đang làm việc với HTMLEntitle. Bạn cần giải mã chúng trước khi gửi chúng đếndangerouslySetInnerHTML đó là lý do tại sao chúng gọi nó là nguy hiểm :)

Ví dụ làm việc:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '<p><strong>Our Opportunity:</strong></p>'
    }
  }

   htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Tôi sử dụng 'Reac-html-Parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

<div> { ReactHtmlParser (html_string) } </div>

Nguồn trên npmjs.com

Nâng lên nhận xét của @ okram để dễ nhìn hơn:

từ mô tả github của nó: Chuyển đổi các chuỗi HTML trực tiếp thành các thành phần React tránh sự cần thiết phải sử dụng một cách nguy hiểm SetInnerHTML từ npmjs.com Một tiện ích để chuyển đổi các chuỗi HTML thành các thành phần React. Tránh sử dụng một cách nguy hiểm SetInnerHTML và chuyển đổi các thành phần, thuộc tính và kiểu nội tuyến HTML tiêu chuẩn thành tương đương React của chúng.

Nếu bạn có quyền kiểm soát nơi chuỗi chứa html đến từ đâu (nghĩa là ở đâu đó trong ứng dụng của bạn), bạn có thể hưởng lợi từ <Fragment>API mới , thực hiện một số việc như:

import React, {Fragment} from 'react'

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it'll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

Bạn chỉ cần sử dụng phương pháp ReactnerHTML nguy hiểm

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Hoặc bạn có thể thực hiện nhiều hơn với cách dễ dàng này: Kết xuất HTML thô trong ứng dụng React

nguy hiểm SetInnerHTML

nguy hiểm SetInnerHTML là sự thay thế của React để sử dụng InternalHTML trong DOM trình duyệt. Nói chung, việc thiết lập HTML từ mã rất rủi ro vì việc vô tình khiến người dùng của bạn gặp phải một cuộc tấn công kịch bản chéo trang (XSS). Vì vậy, bạn có thể đặt HTML trực tiếp từ React, nhưng bạn phải gõ nguy hiểm SetInnerHTML và truyền một đối tượng bằng khóa __html, để tự nhắc nhở bản thân rằng nó nguy hiểm. Ví dụ:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Tôi sử dụng InternalHTML cùng với một tham chiếu để mở rộng:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Trong trường hợp của tôi, tôi đã sử dụng Reac-render-html

Đầu tiên cài đặt gói bằng cách npm i --save react-render-html

sau đó,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Tôi không thể npm buildlàm việc với react-html-parser. Tuy nhiên, trong trường hợp của tôi, tôi đã có thể sử dụng thành công https://reactjs.org/docs/fragments.html . Tôi đã có một yêu cầu để hiển thị một vài ký tự unicode html, nhưng chúng không nên được nhúng trực tiếp vào JSX. Trong JSX, nó phải được chọn từ trạng thái của Thành phần. Đoạn mã thành phần được đưa ra dưới đây:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

tôi sử dụng https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Nếu bạn có quyền kiểm soát {this.props.match.description} và nếu bạn đang sử dụng JSX. Tôi khuyên bạn không nên sử dụng "nguy hiểm SetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML
let description = <h1>Hi there!</h1>;

// Here is how you print
return (
    {description}
);