Reacj JS: разобрать HTML из строк и использовать его

Question

У меня есть JSON вопросы. json:

{
  "question1": "This is a <strong>cool</strong> question"
}

В моем приложении. js Я делаю:

import questions from './questions.json'

class App {
  render () {
    return (
        <p>{questions["question1"]}</p>
    )
  }

Отображает:

"Это крутой вопрос"

(обратите внимание, что я избежал "<\ strong>", поскольку в противном случае SO выделил бы "bool" жирным шрифтом.)

из

"Это крутой вопрос"

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

Спасибо

Answer 1

Вот рабочий пример использования dangerouslySetInnerHTML.

const questions = {
  question1: 'This is a <strong>cool</strong> question'
};

class App extends React.Component {
  render () {
    return (
      <p dangerouslySetInnerHTML={{__html: questions['question1']}} />
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

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

Answer 2

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

 <p dangerouslySetInnerHTML={{ __html: questions["question1"] }} />