React - 将 html 标签放在 json 内容中答案

【问题标题】：React - put html tags inside json contentReact - 将 html 标签放在 json 内容中
【发布时间】：2019-04-01 13:50:34
【问题描述】：

我正在尝试使用 redux 制作多语言网站，我已按照本教程进行操作 > http://www.bebetterdeveloper.com/coding/getting-started-react-redux.html 并将其调整到我的项目中，但是我遇到了问题。我把我的全部内容放在 json 文件中。问题是我希望将一些特定的词加粗。是否可以在 Json 内容中添加 html 标签？我在谷歌中找到了一些方法，但它不起作用......很高兴有任何建议，这是我的代码：

[
    {
      "lang": "en",
      "page": {
        "menu": {
          "home": "Home",
          "brand": "Brand",
          "contact": "Contact"
        },
        "home": {
          "header": "Lorem Ipsum",
          "paragraphOne": "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
          "paragraphTwo": "Lorem <span className=\"bold-me\"> ipsum <\/span> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
        }
      }
    }
  }
]

【问题讨论】：

您的 JSON 中有一个额外的 }。否则，您可以在 JSON 中使用 html，但为了显示它，您需要使用 dangerouslySetInnerHTML

标签： html json reactjs

【解决方案1】：

如果要解析字符串中的 HTML，可以使用 dangerouslySetInnerHTML。然后，您可以设置 bold-me 类的样式以使用更粗的文本，或者简单地使用 b 标记。

示例

const content = [
  {
    lang: "en",
    page: {
      menu: {
        home: "Home",
        brand: "Brand",
        contact: "Contact"
      },
      home: {
        header: "Lorem Ipsum",
        paragraphOne:
          "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
        paragraphTwo:
          "Lorem <b> ipsum </b> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
      }
    }
  }
];

function App() {
  return (
    <div
      dangerouslySetInnerHTML={{ __html: content[0].page.home.paragraphTwo }}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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

【讨论】：