如何从 TinyMCE 解析和渲染文本数据

Question

我正在开发一个博客项目，使用 React 和 Node 来创建它的前端和后端。我正在尝试在我的管理前端中实现 TinyMCE，并且它有效，这意味着我可以在页面中看到编辑器，我可以在其中写入，并且可以将我写入的内容保存在数据库中。但是当我从数据库获取文章并将它们呈现在页面上时，我看到的是：<p>This is an example.</p> 我阅读了文档，但找不到如何正确呈现内容的答案。我尝试使用 html-parser，但<p>它没有显示 ，而是显示了<p>标签。我不确定是否必须更改使用tinyMCE保存文本的方式，或者执行GET请求时显示文本的方式。这是嵌入编辑器的组件：

import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
import Navbar from './navbar';
import authHeader from '../services/authHeader';
import { Editor } from '@tinymce/tinymce-react';

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [text, setText] = useState('');
  const [errors, setErrors] = useState([]);
  const history = useHistory();

  const handleEditorChange = (content, editor) => {
    setText(content);
  };

  const handleSubmit = async (e) => {
    try {
      e.preventDefault();
      const post = {
        title,
        text,
      };

      const request = await fetch('http://localhost:5000/api/posts/create', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          Authorization: authHeader(),
        },
        mode: 'cors',
        body: JSON.stringify(post),
      });

      const response = await request.json();
      if (request.status === 400) {
        setErrors(response);
        return;
      } else {
        console.log(response);
        history.push('/');
      }
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <Navbar></Navbar>
      <div className='container mt-5'>
        {errors.length > 0
          ? errors.map((error) => (
              <p className='alert alert-warning mb-0 mt-4' key={error.msg}>
                {error.msg}
              </p>
            ))
          : ''}
        <form onSubmit={(e) => handleSubmit(e)}>
          <div className='form-group'>
            <label htmlFor='title'>Title</label>
            <input
              className='form-control'
              type='text'
              name='title'
              id='title'
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
          </div>
          <Editor
            initialValue={text}
            init={{
              height: 500,
              menubar: false,
              plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount',
              ],
              toolbar:
                'undo redo | formatselect | bold italic backcolor | \
             alignleft aligncenter alignright alignjustify | \
             bullist numlist outdent indent | removeformat | help',
            }}
            onEditorChange={handleEditorChange}
          />
          <button className='btn btn-primary mt-3'>Create Post</button>
        </form>
      </div>
    </div>
  );
};

export default CreatePost;