Вставьте HTML с помощью React Variable Statements (JSX)

82

Я создаю что-то с React, где мне нужно вставить HTML с React Variables в JSX. Есть ли способ иметь такую ​​переменную:

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

и вставить его так, чтобы он реагировал так, чтобы он работал?

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

и пусть он вставляет HTML как ожидалось? Я не видел и не слышал ничего о реагирующей функции, которая могла бы сделать это inline, или метод анализа вещей, которые позволили бы этому работать.

Теги:
frontend
react-jsx

4 ответа

142
Лучший ответ

Вы можете использовать dangerouslySetInnerHTML, например

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}
Поделиться
  • 2
    Как это работает, если вам нужно что-то добавить в <head> ?
  • 0
    Обычные методы DOM в componentDidMount должны работать, хотя я раньше этого не делал.
Показать ещё 5 комментариев
32

Обратите внимание, что dangerouslySetInnerHTML может быть опасным, если вы не знаете, что находится в строке HTML, которую вы вставляете. Это связано с тем, что код вредоносной клиентской стороны можно вводить с помощью тегов script.

Вероятно, неплохо продезинфицировать HTML-строку с помощью утилиты, такой как DOMPurify, если вы не на 100% уверены, что HTML, который вы просматриваете, безопасен для XSS (межсайтовый скриптинг).

Пример:

import DOMPurify from 'dompurify'

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


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}
Поделиться
  • 0
    Это должен быть комментарий к верхнему ответу, а не сам по себе ответ.
7

dangerouslySetInnerHTML имеет много недостатков, потому что он установлен внутри тега.

Я предлагаю вам использовать некоторую реактивную оболочку, например, я нашел ее здесь, на 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>
    );
}

Очень просто:)

Поделиться
  • 2
    «dangerouslySetInnerHTML имеет много недостатков, потому что он установлен внутри тега». Можете ли вы объяснить больше об этом? Попытка понять, в чем принципиальная разница между html-реагирующим парсером и sanatized innerHtml
4

Если кто-то еще приземляется здесь. С ES6 вы можете создать свою html-переменную следующим образом:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}
Поделиться
  • 2
    и если вы хотите, чтобы переменные были внутри вашей строки, вам нужно будет обернуть каждую из них в {} а всю строку в какую-то разметку, например, так (<span>{telephoneNumber} <br /> {email}</span>)
  • 2
    Это отличается от того, что задано в вопросе. В вопросе <p>copy copy copy <strong>strong copy</strong></p> есть строка. У вас это как JSX.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню