从数据库中提取字符串时如何在 JSX 中呈现 HTML 标签答案

【问题标题】：How to render HTML tags in JSX when pulling a string from a database从数据库中提取字符串时如何在 JSX 中呈现 HTML 标签
【发布时间】：2020-06-27 01:30:19
【问题描述】：

我正在创建一个 React.js 项目，我想从 Firebase 中提取一个包含 HTML 标签的字符串并呈现这些标签。但是，当我将字符串呈现为 JSX 元素内的字符串插值时，HTML 标签只是打印为文本而不是实际生效。

代码如下：


    import React from 'react';
    import styled from 'styled-components';
    import { firestore } from '../../firebase/firebase.utils';
    
    const name = firestore.collection('blog-categories').doc('8uVaHd22tT5oXSzpOOuj').get().then(doc => 
    doc.get('name'));
    
    class Economics extends React.Component {
      constructor() {
        super();
    
        this.state = {
          name: '',
          image: '',
          whyRead: ''
        }
      }
    
      componentDidMount() {
        firestore.collection('blog-categories').doc('8uVaHd22tT5oXSzpOOuj').get().then(doc => {
          this.setState({ name: doc.get('name'), image: doc.get('image'), whyRead: doc.get('why-read') 
          });
        });
      }
    
    
      render() {
        return (
          <div>
            <h1>{ `${this.state.whyRead}` }</h1>
          </div>
        )
      }
    }
    
    export default Economics;

当我运行这段代码时，结果如下：

但是，我希望 HTML 粗体标记真正生效并创建粗体文本。我该怎么做？

【问题讨论】：

reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

标签： html reactjs firebase

【解决方案1】：

dangerouslySetInnerHTML

dangerouslySetInnerHTML 是 React 在浏览器 DOM。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但是你有输入 dangerouslySetInnerHTML 并使用 __html 传递一个对象关键，提醒自己这是危险的。

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

return <div dangerouslySetInnerHTML={{__html: this.state.whyRead}} />;

【讨论】：