Hướng dẫn can you put html in react? - bạn có thể đưa html vào phản ứng không?

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 các biến phản ứng 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à để chèn 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à nó đã chèn HTML như mong đợi? Tôi đã không thấy hoặc nghe bất cứ điều gì về một chức năng React có thể làm điều này nội tuyến, hoặc một phương pháp phân tích những thứ cho phép điều này hoạt động.

Vlaz

24.7K9 Huy hiệu vàng47 Huy hiệu bạc62 Huy hiệu Đồng9 gold badges47 silver badges62 bronze badges

Khi được hỏi ngày 12 tháng 5 năm 2014 lúc 18:28May 12, 2014 at 18:28

Kyle Hotchkisskyle HotchkissKyle Hotchkiss

10.3K20 Huy hiệu vàng55 Huy hiệu bạc82 Huy hiệu Đồng20 gold badges55 silver badges82 bronze badges

0

Bạn có thể sử dụng nguy hiểm, ví dụ:

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

Đã trả lời ngày 14 tháng 5 năm 2014 lúc 19:33May 14, 2014 at 19:33

7

Lưu ý rằng

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

Có lẽ bạn nên 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 bạn đang hiển thị là XSS (kịch bản chéo trang) an toàn.DOMPurify if you are not 100% sure the HTML you are rendering is XSS (cross-site scripting) safe.

Example:

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

Khuong

10,8K13 Huy hiệu vàng75 Huy hiệu bạc113 Huy hiệu đồng13 gold badges75 silver badges113 bronze badges

Đã trả lời ngày 22 tháng 2 năm 2017 lúc 1:17Feb 22, 2017 at 1:17

Yo wakitayo wakitaYo Wakita

5.1123 Huy hiệu vàng22 Huy hiệu bạc35 Huy hiệu Đồng3 gold badges22 silver badges35 bronze badges

3

DangerouslySetInnerHTML có nhiều bất lợi vì nó đặt bên trong thẻ.

Tôi khuyên bạn nên sử dụng một số trình bao bọc phản ứng như tôi đã tìm thấy một ở đây trên NPM cho mục đích này. HTML-React-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 :)

CẬP NHẬT

Trong phiên bản mới nhất như cách sử dụng đã giải thích:

// ES Modules
import parse from 'html-react-parser';

// CommonJS
const parse = require('html-react-parser');
....

//Parse single element
parse('<li>Item 1</li><li>Item 2</li>');

//Parse multiple elements
parse('<li>Item 1</li><li>Item 2</li>');

Feras

2.26530 huy hiệu bạc23 Huy hiệu đồng30 silver badges23 bronze badges

Đã trả lời ngày 10 tháng 8 năm 2017 lúc 14:54Aug 10, 2017 at 14:54

user2903536user2903536user2903536

1.62818 Huy hiệu bạc24 Huy hiệu đồng18 silver badges24 bronze badges

2

Bằng cách sử dụng

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

const App = () => {
const span = <span> whatever your string </span>

const dynamicString = "Hehe";
const dynamicStringSpan = <span> {`${dynamicString}`} </span>

  return (
    <div>

      {span}

      {dynamicStringSpan}

    </div>
  );

};

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Gangula

4.0612 Huy hiệu vàng21 Huy hiệu bạc44 Huy hiệu đồng2 gold badges21 silver badges44 bronze badges

Đã trả lời ngày 16 tháng 3 năm 2018 lúc 14:31Mar 16, 2018 at 14:31

amitchauh4namitchauh4namitchauh4n

1.3282 Huy hiệu vàng12 Huy hiệu bạc19 Huy hiệu đồng2 gold badges12 silver badges19 bronze badges

2

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ập hợp 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à phần tử HTML -

1. Loại bỏ

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

   6 và nó sẽ hoạt động
2. Sử dụng

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

   8 để trả về phần tử HTML.

Đã trả lời ngày 13 tháng 11 năm 2018 lúc 12:42Nov 13, 2018 at 12:42

3

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

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

Đã trả lời ngày 22 tháng 5 năm 2018 lúc 12:19May 22, 2018 at 12:19

Tudor Morartudor MorarTudor Morar

3,4721 Huy hiệu vàng25 Huy hiệu bạc24 Huy hiệu đồng1 gold badge25 silver badges24 bronze badges

Bạn không cần bất kỳ thư viện đặc biệt hoặc thuộc tính "nguy hiểm". Bạn chỉ có thể sử dụng React Ref để thao túng DOM:

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

Một mẫu làm việc có thể được tìm thấy ở đây:

https://codepen.io/bemipefe/pen/mdEjaMK

Đã trả lời ngày 5 tháng 11 năm 2020 lúc 19:21Nov 5, 2020 at 19:21

BemipefebemipefeBemipefe

1.3184 Huy hiệu vàng16 Huy hiệu bạc28 Huy hiệu đồng4 gold badges16 silver badges28 bronze badges

1

Hãy thử Fragment, nếu bạn không muốn bất kỳ điều gì ở trên.

Trong trường hợp của bạn, chúng tôi có thể viết

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

Nếu bạn sử dụng hook, muốn đặt nó ở trạng thái ở đâu đó với bất kỳ điều kiện nào

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

Gangula

4.0612 Huy hiệu vàng21 Huy hiệu bạc44 Huy hiệu đồng2 gold badges21 silver badges44 bronze badges

Đã trả lời ngày 16 tháng 3 năm 2018 lúc 14:31Jul 22, 2020 at 7:37

2

1.3282 Huy hiệu vàng12 Huy hiệu bạc19 Huy hiệu đồng

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

Bằng cách sử dụng '' tập hợp 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à phần tử HTML -Oct 27, 2017 at 13:30

Loại bỏ

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

Sử dụng

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

3

Đã trả lời ngày 13 tháng 11 năm 2018 lúc 12:42

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

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

Đã trả lời ngày 22 tháng 5 năm 2018 lúc 12:19Mar 16, 2018 at 10:30

Tôi có thể sử dụng HTML trong React không?

Làm cách nào để thêm mã HTML vào thành phần React?

Tôi có thể nhập tệp HTML trong React không?

Điều gì cho phép bạn viết HTML trong React?