Как сохранить HTML как значение свойства объекта в состоянии реакции?

Question

У меня есть это состояние в моем компоненте FAQ:

this.state = {
            faqs: [
                {
                    question: "Some question string",
                    answer: "Some answer string"
                },
                {
                    question: "Some question string",
                    answer: "Some answer string"
                }
            ]
        };

К чему я обращаюсь в методе рендеринга, чтобы отобразить каждый набор FAQ Однако мое свойство 'answer' должно содержать <p></p> тегов, как в:

{
   question: "Some question string",
   answer: "<p>Some answer string</p> <p>Some answer string</p>"
}

Как мне добиться этого в реакции?

Answer 1

Если я правильно понимаю вашу ситуацию, это может быть в случае встроенной реакции dangerouslySetInnerHTML prop.

dangerouslySetInnerHTML prop предоставляет механизм для указания html-содержания элемента посредством строкового значения, а не через JSX.

Чтобы проиллюстрировать эту концепцию, см. Следующий код:

// I am assuming that your render function looks something like this:
function render() {

  const faqs = this.state.faqs

  return (<div>
    faqs.map(faq => {    
      return (<div>
          <h3> {{ faq.question }}</h3>
          {/* make use of dangerouslySetInnerHTML in this way to 
              account for HTML tags/markup in the answer variable */}
          <div dangerouslySetInnerHTML={{ _html : faq.answer }}></div>
        </div>)    
    })
    </div>)
}