ReactJS markdown编辑器组件无法呈现

Question

我目前正在学习React，目前正在CodeSandbox中试用Slate Markdown Editor。我正在尝试初始化一个Slate Editor实例，如下所示：

import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
import Editor from "slate-md-editor";
const MdEditor = Editor();
<MdEditor />;

然而，当我试图编译代码时，CodeSandbox显示以下错误：

at evaluate (https://oxxbg.csb.app/node_modules/canner/slate-icon-codeblock/lib/index.js:80:45z
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:98419
X.evaluate
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110543
ye.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:120123
c
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110289
evaluate
https://oxxbg.csb.app/node_modules/slate-md-editor/lib/index.js:34:27
z
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:98419
X.evaluate
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110543
ye.evaluateTranspiledModule
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:120123
c
https://codesandbox.io/static/js/sandbox.cddc3c052.js:1:110289
evaluate
/src/index.js:5
2 | import ReactDOM from "react-dom";
3 | import "./styles.css";
4 | 
> 5 | import Editor from "slate-md-editor";
6 | const MdEditor = Editor();
7 | 
8 | <MdEditor />;

我以前没有经历过这种情况，我不知道该怎么办。

如果有更有经验的人能对这个问题有所了解，我将不胜感激。提前谢谢。

Sandbox 链接

这是我的包.json:

{
"name": "slate-editor",
"version": "1.0.0",
"description": "React testing project",
"keywords": [
"react",
"starter"
],
"main": "src/index.js",
"dependencies": {
"antd": "4.10.2",
"immutable": "4.0.0-rc.12",
"react": "17.0.0",
"react-dom": "17.0.0",
"react-scripts": "3.4.3",
"slate": "0.59.0",
"slate-md-editor": "1.5.4",
"slate-react": "0.59.0",
"slate-schema-violations": "0.1.39"
},
"devDependencies": {
"typescript": "3.8.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}

Answer 1

这是我后来发现的：

步骤1

设置一个基本的React项目，如：

npx create-react-app slate-editor-demo
cd slate-editor-demo

步骤2

删除src/文件夹中的App.js、App.testing.js和App.css。您现在应该在该文件夹中只有五个文件：

• index.css
• index.js
• logo.svg
• reportWebVitals.js
• setupTests.js

步骤3

安装slate-md-editor的依赖项。它们在这里：

"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd": "^3.8.4",
"immutable": "^3.8.2",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5",
"slate": "^0.40.2",
"slate-react": "^0.12.0",
"slate-schema-violations": "^0.1.39",
"slate-md-editor": "1.5.4",
"web-vitals": "^1.0.1"

您可以简单地将这些依赖项复制到package.json中，然后运行npm install来更新dep。

步骤4

编辑您的src/index.js，使其看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Editor from "./slateMDEditor";
import reportWebVitals from './reportWebVitals';
const options = {
// default settings
prismOption: {
// https://github.com/GitbookIO/slate-prism
onlyIn: node => node.type === 'code_block',
getSyntax: node => node.data.get('syntax')
},
codeOption: {
// https://github.com/GitbookIO/slate-edit-code
onlyIn: node => node.type === 'code_block'
},
blockquoteOption: {
// https://github.com/GitbookIO/slate-edit-blockquote
},
listOption: {
// https://github.com/GitbookIO/slate-edit-list
types: ['ordered_list', 'unordered_list'],
typeItem: 'list_item',
typeDefault: 'paragraph'
}
}
const MdEditor = Editor(options); 
ReactDOM.render(
<MdEditor onChange={this.onChange} />,
document.getElementById('root')
);
// Start measuring performance in app
reportWebVitals();

步骤5

最后一步：运行npm run start(如果使用NPM(或yarn start(如果使用yarn(。您应该看到slate markdown编辑器在本地主机上的浏览器中平稳运行。