странная html проблема рендеринга с помощью реакции

Question

Я пытаюсь отобразить сообщение с тегами html внутри. Рендеринг работает нормально, если строка передается как опора, но когда то же самое передается из переменной, отображаемый текст имеет закодированный текст.

Есть идеи, как заставить его работать в обоих сценариях ios. ?

class Hello extends React.Component {
  render() {
    console.log(this.props.name)
    return <div>{this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="&lt;p&gt;How are you?&lt;/p&gt;" />,
  document.getElementById('container') --> **<p>How are you?</p>** 
);


class HelloOther extends React.Component {
  render() {
    const name = "&lt;p&gt;How are you?&lt;/p&gt;" 
    return <Hello name={name} />;
  }
}

ReactDOM.render(
  <HelloOther />,
  document.getElementById('container2') -- &lt;p&gt;How are you?&lt;/p&gt; -- > why?
);

Ссылка на скрипт - https://jsfiddle.net/d6s7be1f/2/

Answer 1

From React Docs:

В общем, установка HTML из кода рискованна, потому что легко случайно подвергнуть ваших пользователей межсайтовому скриптингу (XSS) атака. Итак, вы можете установить HTML прямо из React, но вам нужно ввести опасноSetInner HTML и передать объект с ключом __ html, чтобы напомнить себе, что это опасно.

Если вы не хотите использовать dangerouslySetInnerHTML, вы можете использовать регулярное выражение для обертывания строки тегами html. Таким образом, вам не нужно передавать html сущностей в строке. Вы просто передаете строку и оборачиваете строку тегом html, используя функцию .replace().

Поскольку вы также хотите, чтобы строка анализировалась как HTML, вы можете передать дополнительную опору в Hello компонент, который затем используется для обертывания строки желаемым тегом html, а также для визуализации строки, вложенной в желаемый тег html

function HTMLTag({ tag, children }) {
  return React.createElement(tag, null, children);
}

class Hello extends React.Component {
  render() {
    const { name, tag } = this.props;
    const str = name.replace(/(.+)/, `<${tag}>$1</${tag}>`);
    return ( 
        <div>
        <HTMLTag tag={tag}>{str}</HTMLTag>
        </div>
    );
  }
}

class HelloOther extends React.Component {
  render() {
    const name = "How are you?"; 
    return <Hello name={name} tag="h3" />;
  }
}

ReactDOM.render(
  <Hello name="How are you?" tag="p" />,
  document.getElementById('container')
);

ReactDOM.render(
  <HelloOther />,
  document.getElementById('container2')
);

<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="container"></div>
<div id="container2"></div>

Answer 2

class Hello extends React.Component {
  createMarkup() {
    return {__html: this.props.name};
  }
  render() {
    return <div dangerouslySetInnerHTML={this.createMarkup()} />;
  }
}