Hướng dẫn can i use html in jsx? - tôi có thể sử dụng html trong jsx 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 = '
copy copy copy strong copy
';

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

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

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ạc63 Huy hiệu Đồng9 gold badges47 silver badges63 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 (
        

    );
}

Đã 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 (
        
{thisIsMyCopy}
    );
}

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 = '
copy copy copy strong copy
';


render: function() {
    return (
        

    );
}

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.1223 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 = '
copy copy copy strong copy
';


render: function() {
    return (
        
{Parser(thisIsMyCopy)}
    );
}

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('
Item 1
Item 2
');

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

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.63818 Huy hiệu bạc24 Huy hiệu đồng18 silver badges24 bronze badges

2

Bằng cách sử dụng

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

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

const dynamicString = "Hehe";
const dynamicStringSpan =  {`${dynamicString}`} 

  return (
    


      {span}

      {dynamicStringSpan}

    
  );

};

ReactDOM.render(, document.getElementById("root"));

Gangula

4.0712 Huy hiệu vàng21 Huy hiệu bạc45 Huy hiệu đồng2 gold badges21 silver badges45 bronze badges

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

Amit Chauhanamit ChauhanAmit Chauhan

1.7423 huy hiệu vàng14 Huy hiệu bạc23 Huy hiệu đồng3 gold badges14 silver badges23 bronze badges

2

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

var thisIsMyCopy = (
  
    
copy copy copy 
    strong copy
    
  
)

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 (
           
   {thisIsMyCopy}
       );
   }
   

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

   render: function() {
       return (
           
   {thisIsMyCopy}
       );
   }
   

   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: '
' },
    };
    return (
        

    );
  }

Đã 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,4821 Huy hiệu vàng26 Huy hiệu bạc24 Huy hiệu đồng1 gold badge26 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 (
        
{thisIsMyCopy}
    );
}

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 (
        
{thisIsMyCopy}
    );
}

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 (
        
{thisIsMyCopy}
    );
}

Gangula

4.0712 Huy hiệu vàng21 Huy hiệu bạc45 Huy hiệu đồng2 gold badges21 silver badges45 bronze badges

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

2

Amit Chauhanamit Chauhan

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

1.7423 huy hiệu vàng14 Huy hiệu bạc23 Huy hiệu đồngOct 27, 2017 at 13:30

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

Loại bỏ

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

3

Sử dụng

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

render: function() {
    return (
        
{thisIsMyCopy}
    );
}

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

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

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

HTML và JSX có giống nhau không?

Làm cách nào để chuyển đổi HTML thành JSX?

Từ khóa nào của HTML không có sẵn trong JSX?