ReactJS标记编辑器组件无法呈现

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 />;

我以前没有经历过这种情况，我不知所措。

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

Link to the Sandbox

这是我的package.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

这是我后来发现的：

第一步

如下所示设置一个基本的React项目：

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

第二步

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

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

第三步

安装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来更新deps。

第四步

编辑您的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();

第五步

最后一步:运行npm run start (如果使用NPM)或yarn start (如果使用yarn)。您应该会看到slate markdown编辑器在本地主机上的浏览器中运行得很流畅。