将Draft JS实现到Next JS中，文本编辑器不会显示

Question

我正在尝试将草案 js 作为文本编辑器实现到我的 next.js 项目中。我已经根据官方指南实现了所有代码，但文本编辑器不会显示。这是我的代码

索引.js

import React, { Component } from 'react'
import { useRouter, Router } from 'next/router';
import Layout from '../../components/MyLayout';
import Settings from '../../components/Settings';
import MyEditor from '../../components/TextEditor';
import fetch from 'isomorphic-unfetch';
import {Editor, EditorState} from 'draft-js';

const Post = (props) => {
    const router = useRouter();
    const object = props.post.data[0];
  return (
    <Layout>
      <h1>{object.title}</h1>
      <div className="p-2 border bg-light text-right text-dark">Oleh: {object.username}</div>
      <MyEditor/>
    </Layout>
  );
}

Post.getInitialProps = async function(context) {
    const {id} = context.query;
    const FormData = new URLSearchParams();
    FormData.append('slug',`${id}`);
    const res = await fetch(Settings.api+'viewPost',{
        'method': 'POST',
        'body': FormData
    });
    const post = await res.json();
    console.log('aw');
    return {
        post
    };
};

export default Post;

文本编辑器.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';

export default function MyEditor() {
  const [editorState, setEditorState] = React.useState(
    EditorState.createEmpty()
  );

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
    />
  );
}

我真的很感激任何答案。谢谢

Answer 1

看起来你正在做正确的事情 - Draft-js 是一个非常低级的编辑工具，你可以在其上构建富文本编辑 - 我猜编辑器实际上是在页面上呈现的，但是您尚未添加任何工具栏或复杂的初始状态，因此您只看到一个空白页面。

我在这里重现了一个超级基本的 Next JS 示例： https: //codesandbox.io/s/naughty-swirles-7nmbf ?file=/pages/index.js 你会看到编辑器本身是“不可见的”，因为有没有应用样式，也没有工具栏。如果您进一步查看 Draft-js 文档，您会发现您可以应用初始配置对象，这将为其提供基本样式（您可以根据需要进一步自定义）。