ReacjJS：从字符串中解析 HTML 并使用它答案

【问题标题】：ReacjJS: Parse HTML from strings and use itReacjJS：从字符串中解析 HTML 并使用它
【发布时间】：2020-07-08 02:16:43
【问题描述】：

我有一个 JSON questions.json：

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

在我的 App.js 中我这样做：

import questions from './questions.json'

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

显示：

“这是一个很酷的问题”

（请注意，我转义了“”，否则 SO 会将“bool”渲染为粗体。）

而不是

“这是一个很酷的问题”

我可以考虑编写一个找到每个“强”标记的递归，但我想知道是否已经存在一种方法。

谢谢

【问题讨论】：

方式已经存在。结帐dangerouslySetInnerHTML

标签： javascript reactjs jsx node-modules

【解决方案1】：

您可以尝试使用dangerouslySetInnerHTML 并检查它是否有效。

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

【讨论】：

【解决方案2】：

这是一个使用 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>

【讨论】：