it-swarm.com.ru

Вставьте HTML с React переменными выражениями (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, как ожидалось? Я не видел и не слышал ничего о функции реагирования, которая могла бы делать это встроенным, или о методе анализа вещей, который позволил бы этому работать.

163
Kyle Hotchkiss

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

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

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

Вероятно, хорошей идеей будет очистить строку HTML с помощью такой утилиты, как DOMPurify, если вы не уверены на 100%, что отображаемый вами код безопасен для 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>
    );
}
68
Yo Wakita

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

Я предлагаю вам использовать для этой цели какую-нибудь оболочку реагирования, как я нашел здесь на npm . html-реагировать-парсер выполняет ту же работу.

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

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

28
user2903536

Чтобы избежать ошибок линтера, я использую это так:

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

Используя '', вы превращаете его в строку. Используйте без кавычек, он будет работать нормально. 

2
chauhan amit
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.
1
Amandeep Singh Ghai