แทรก HTML ด้วยข้อความตอบกลับตัวแปร (JSX)

ฉันกำลังสร้างบางสิ่งด้วย React ที่ฉันต้องการแทรก HTML ด้วยตัวแปร React ใน JSX มีวิธีที่จะมีตัวแปรดังนี้:

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

และใส่เข้าไปในปฏิกิริยาเช่นนั้นและทำงานได้หรือไม่

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

และมันแทรก HTML ตามที่คาดไว้หรือไม่ ฉันไม่ได้เห็นหรือได้ยินอะไรเกี่ยวกับฟังก์ชั่นตอบสนองที่สามารถทำแบบอินไลน์นี้หรือวิธีการแยกวิเคราะห์สิ่งที่จะช่วยให้การทำงาน

คุณสามารถใช้harmlySetInnerHTMLเช่น

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

โปรดทราบว่าdangerouslySetInnerHTMLอาจเป็นอันตรายได้หากคุณไม่ทราบว่ามีอะไรอยู่ในสตริง HTML ที่คุณกำลังฉีด นี่เป็นเพราะรหัสฝั่งไคลเอ็นต์ที่เป็นอันตรายสามารถฉีดผ่านแท็กสคริปต์

อาจเป็นความคิดที่ดีที่จะทำความสะอาดสตริง HTML ผ่านทางยูทิลิตี้เช่นDOMPurifyหากคุณไม่แน่ใจ 100% ว่า HTML ที่คุณกำลังแสดงนั้นปลอดภัย XSS (การเขียนสคริปต์ข้ามไซต์)

ตัวอย่าง:

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

dangerlySetInnerHTMLมีข้อเสียมากมายเนื่องจากอยู่ภายในแท็ก

ฉันขอแนะนำให้คุณใช้ wrapper ปฏิกิริยาเหมือนฉันพบที่นี่ใน npm เพื่อวัตถุประสงค์นี้ html-react-parserทำหน้าที่เดียวกัน

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

ง่ายมาก :)

โดยการใช้''คุณจะทำให้มันเป็นสตริง ใช้โดยไม่มีเครื่องหมายจุลภาคคว่ำมันจะทำงานได้ดี

เพื่อหลีกเลี่ยงข้อผิดพลาด linter ฉันใช้มันเช่นนี้

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

โดยการใช้ '' จะเป็นการตั้งค่าให้กับสตริงและ React จะไม่มีทางรู้ว่ามันเป็นองค์ประกอบ HTML คุณสามารถทำสิ่งต่อไปนี้เพื่อให้ React รู้ว่ามันเป็นองค์ประกอบ HTML -

1. ลบ''และมันจะทำงาน
2. ใช้<Fragment>เพื่อส่งคืนองค์ประกอบ HTML

หากใครยังคงมาที่นี่ ด้วย ES6 คุณสามารถสร้างตัวแปร html ของคุณเช่น:

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

คุณสามารถรวม HTML นี้ใน ReactDOM ดังนี้:

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

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

ที่นี่มีสองลิงค์เชื่อมโยงและlink2จาก React เอกสารซึ่งอาจจะเป็นประโยชน์