แสดงผลสตริง HTML เป็น HTML จริงในองค์ประกอบ React

นี่คือสิ่งที่ฉันพยายามและมันผิดพลาดอย่างไร

งานนี้:

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

สิ่งนี้ไม่:

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

คุณสมบัติคำอธิบายเป็นเพียงสตริงปกติของเนื้อหา HTML อย่างไรก็ตามมันแสดงผลเป็นสตริงไม่ใช่ HTML ด้วยเหตุผลบางประการ

ข้อเสนอแนะใด ๆ

ตรวจสอบว่าข้อความที่คุณพยายามผนวกเข้ากับโหนดไม่ได้รับการยกเว้นดังนี้:

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

แทนสิ่งนี้:

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

ถ้าหนีคุณควรแปลงจากฝั่งเซิร์ฟเวอร์ของคุณ

โหนดเป็นข้อความเพราะจะถูกหลบหนี

โหนดเป็นโหนด dom เพราะไม่ได้หลบหนี

ไม่this.props.match.descriptionเป็นสตริงหรือวัตถุ? หากเป็นสตริงควรแปลงเป็น HTML ได้ ตัวอย่าง:

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'));

ผลลัพธ์: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

อย่างไรก็ตามหากdescription: <h1 style="color:red;">something</h1>ไม่มีคำพูด''คุณจะได้รับ:

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

หากเป็นสตริงและคุณไม่เห็นมาร์กอัป HTML ใด ๆ ปัญหาเดียวที่ฉันเห็นคือมาร์กอัปผิดพลาด ..

UPDATE

หากคุณกำลังติดต่อกับ HTMLEntitles คุณต้องถอดรหัสพวกเขาก่อนที่จะส่งพวกเขาไปdangerouslySetInnerHTMLที่นั่นคือเหตุผลที่พวกเขาเรียกมันว่าอันตราย :)

ตัวอย่างการทำงาน:

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'));

ฉันใช้ 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

แหล่งที่มาบน npmjs.com

การยกความคิดเห็นของ @ okram เพื่อให้มองเห็นได้ชัดเจนขึ้น:

จากคำอธิบาย github: แปลงสตริง HTML โดยตรงไปยังส่วนประกอบ React หลีกเลี่ยงความจำเป็นในการใช้ dangerlySetInnerHTML จาก npmjs.com ยูทิลิตี้สำหรับการแปลงสตริง HTML เป็นส่วนประกอบ React หลีกเลี่ยงการใช้ dangerlySetInnerHTML และแปลงองค์ประกอบ HTML มาตรฐานคุณลักษณะและรูปแบบอินไลน์เป็นสิ่งที่เทียบเท่ากับ React

หากคุณสามารถควบคุมได้ว่าสตริงที่มี html นั้นมาจากที่ไหน (เช่นที่ใดที่หนึ่งในแอปของคุณ) คุณสามารถได้รับประโยชน์จาก<Fragment>API ใหม่โดยทำสิ่งต่อไปนี้:

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

คุณเพียงแค่ใช้ harmlySetInnerHTML วิธีการ React

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

หรือคุณสามารถใช้งานได้มากขึ้นด้วยวิธีง่ายๆนี้: แสดงผล HTML แบบดิบในแอป React

dangerouslySetInnerHTML

dangerlySetInnerHTML ถูกแทนที่ด้วย React สำหรับการใช้ innerHTML ในเบราว์เซอร์ DOM โดยทั่วไปแล้วการตั้งค่า HTML จากรหัสนั้นมีความเสี่ยงเพราะเป็นการง่ายที่จะทำให้ผู้ใช้ของคุณถูกโจมตีแบบข้ามไซต์ (XSS) ดังนั้นคุณสามารถตั้งค่า HTML ได้โดยตรงจาก React แต่คุณต้องพิมพ์ dangerlySetInnerHTML และส่งวัตถุด้วยคีย์ __html เพื่อเตือนตัวเองว่ามันอันตราย ตัวอย่างเช่น:

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

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

ฉันใช้ innerHTML ร่วมกันเพื่ออ้างอิง:

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

ในกรณีของฉันฉันใช้react-render-html

ก่อนติดตั้งแพคเกจโดย npm i --save react-render-html

แล้ว

import renderHTML from 'react-render-html';

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

ฉันไม่สามารถรับการทำงานร่วมกับnpm build react-html-parserอย่างไรก็ตามในกรณีของฉันฉันสามารถใช้https://reactjs.org/docs/fragments.htmlได้สำเร็จ ฉันมีความต้องการที่จะแสดงอักขระยูนิโค้ด html ไม่กี่ตัว แต่ไม่ควรฝังใน JSX โดยตรง ภายใน JSX จะต้องเลือกจากสถานะของคอมโพเนนต์ ตัวอย่างรหัสส่วนประกอบได้รับด้านล่าง:

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

ฉันใช้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>)

หากคุณมีการควบคุม {this.props.match.description} และหากคุณใช้ JSX ฉันอยากจะแนะนำไม่ให้ใช้ "dangerlySetInnerHTML"

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