ReactJS 降价编辑器组件无法呈现

编程问答 2022-05-30

问题描述

我目前正在学习 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"
  ]
}

解决方法

这是我后来发现的：

步骤 1

像这样设置一个基本的 React 项目：

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

步骤 2

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

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

步骤 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（如果您使用纱线）。您应该会在本地主机上的浏览器中看到 slate markdown 编辑器顺利运行。

codesandboxcompiler-errorsreactjsreactjsreactjsreactjs