从 draft-js-plugins-editor 导入编辑器会导致空项目出现类型错误

Importing Editor from draft-js-plugins-editor causes TypeErrors on empty project

我在 Webstorm 中创建了一个新的 React 项目。我已经安装了 draft-jsdraft-js-plugins-editor,以及插件 draft-js-hashtag-plugindraft-js-mathjax-plugin(使用节点)。

我已经关注了他们的 'getting started' on their Github,但是这个例子对我不起作用。我一写

import Editor from 'draft-js-plugins-editor';

我收到 TypeError: Cannot read property 'object' of undefined 错误。

./node_modules/draft-js-plugins-editor/lib/Editor/index.js
node_modules/draft-js-plugins-editor/lib/Editor/index.js:177
174 | }(_react.Component);
175 |
176 | PluginEditor.propTypes = {
    > 177 |   editorState: _react2.default.PropTypes.object.isRequired,
178 |   onChange: _react2.default.PropTypes.func.isRequired,
179 |   plugins: _react2.default.PropTypes.array,
180 |   defaultKeyBindings: _react2.default.PropTypes.bool,

我的最小示例代码:

import React, { Component } from 'react';
import Editor from 'draft-js-plugins-editor'; // Error upon doing this
import createHashtagPlugin from 'draft-js-hashtag-plugin';
import { EditorState } from 'draft-js';

const hashtagPlugin = createHashtagPlugin();

const plugins = [
    hashtagPlugin,
];

export default class MyEditor extends Component {

    state = {
        editorState: EditorState.createEmpty(),
    };

    onChange = (editorState) => {
        this.setState({
            editorState,
        });
    };

    render() {
        return (
            <Editor
                editorState={this.state.editorState}
                onChange={this.onChange}
                plugins={plugins}
            />
        );
    }
}

出现此错误是因为您使用了最新(16th)版本的React.js。 In this 博客 post(React.js 版本 16 的公告)您可以阅读:

The deprecations introduced in 15.x have been removed from the core package. React.createClass is now available as create-react-class, React.PropTypes as prop-types...

所有仍然访问的旧包 React.PropTypes 如果将它们与 React 16 一起使用将被破坏。

如果你想使用draft-js-plugins-editor,你必须将你的反应版本降级到版本15。例如,对于npm使用这个命令

npm install react@15.4.2 --save

或者 yarn 这个:

yarn add react@15.4.2