draft-js-plugins-editor不显示next.js多个实例的工具栏

Question

这是我的组成部分RichText.js

import React, { Component } from 'react';
import Editor, { createEditorStateWithText } from 'draft-js-plugins-editor';
import createInlineToolbarPlugin from 'draft-js-inline-toolbar-plugin';

const inlineToolbarPlugin = createInlineToolbarPlugin();
const { InlineToolbar } = inlineToolbarPlugin;
const plugins = [inlineToolbarPlugin];
const text = 'In this editor a toolbar shows up once you select part of the text …';

export default class SimpleInlineToolbarEditor extends Component {

  state = {
    editorState: createEditorStateWithText(text),
  };

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

  focus = () => {
    this.editor.focus();
    console.log(this.editor.getEditorRef())
  };

  render() {
    return (
      <div className='editor' onClick={this.focus}>
        <Editor
          editorState={this.state.editorState}
          onChange={this.onChange}
          plugins={plugins}
          ref={(element) => { this.editor = element; }}
        />
        <InlineToolbar />
      </div>
    );
  }
}

这是我的容器组件，它多次使用RichText.js：

constructor(props) {
    this.state = {
      editor: null,
    }
  }

componentDidMount() {
    this.setState({ editor: Editor })
  }

render() {
  ....
 { this.state.editor && <RichText /> }
 { this.state.editor && <RichText /> }
 ....
}

我正在使用状态来确保编辑器正在浏览器中呈现。但是，只有编辑器的最后一个实例（在这种情况下为第二个）显示工具栏。控制台中没有错误，看来编辑器键也不同于getEditorRef（）。

任何想法，我该如何解决该问题？

在此先感谢您的帮助。