一次插入多个草稿组件

Question

我一直在使用草稿js和the richbuttons plugin，如果我只有一个编辑器组件，一切正常。但是，当我尝试在页面上添加多个组件时，丰富按钮仅适用于最近添加的编辑器。

我有read about adding multiple plugins，但是他们包含的例子没有考虑导入组件到插件中。我正在试图做的是一样的东西：

const richButtonsPlugin = createRichButtonsPlugin(); 
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin; 
const plugins = [richButtonsPlugin] 

const richButtonsPlugin2 = createRichButtonsPlugin(); 
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin2; 
const plugins2 = [richButtonsPlugin2] 

但如果我尝试这样做，我得到一个编译错误说

Module build failed: Duplicate declaration "ItalicButton" 

我打算在具有8+编辑在操作一次在我的单页面应用程序中，那么是否有任何方法来初始化将连接到各自编辑器组件的每个插件的丰富按钮插件，并重用相同的按钮组件（即ItalicButton，BoldButton）？

我会说实话，我不太懂这行的语法：

const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin; 

因此，任何资源，以了解正在发生的事情，将不胜感激，谢谢！

Answer 1

I'll be honest that I don't quite understand the syntax of this line:

const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin; 

这被称为destructuring，和一种方法来提取对象（或阵列）的数据，并且将它们放入变量。你会得到同样的结果，如果你写道：

const ItalicButton = richButtonsPlugin.ItalicButton 
const BoldButton = richButtonsPlugin.BoldButton 
const UnderlineButton = richButtonsPlugin.UnderlineButton 
...and so on 

这就是为什么你的错误：

Module build failed: Duplicate declaration "ItalicButton" 

您已经创建的变量const ItalicButton两次（你实际上做到了他们全部）。

我认为你应该做的是： 用丰富的按钮把你的编辑器变成它自己的组件。它可能是这个样子：

import Editor from 'draft-js-plugins-editor'; 
import createRichButtonsPlugin from 'draft-js-richbuttons-plugin'; 

const richButtonsPlugin = createRichButtonsPlugin(); 

const { ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button } = richButtonsPlugin; 

const plugins = [ 
    richButtonsPlugin 
    //...other plugins 
]; 

export default class MyEditor extends Component { 
    render() { 
    return (
     <div> 
     <div className="myToolbar"> 
      <BoldButton/> 
      <ItalicButton/> 
      <UnderlineButton/> 
      <OLButton/> 
      <ULButton/> 
      <H2Button/> 
     </div> 
     <Editor 
      editorState={this.props.editorState} 
      handleChange={this.props.handleChange} 
      plugins={plugins} 
      // ...other props 
     /> 
     </div> 
    ); 
    } 
} 

比方说，你把这个组件到一个名为my-editor.js文件。现在，你可以在任何地方你想重新使用它，像这样：

import MyEditor from './my-editor.js'; 
import { EditorState } from 'draft-js'; 

export default class App extends Component { 

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

    handleChange = (editorState) => { 
    this.setState({ editorState }) 
    } 

    render() { 
    return (
     <div> 
     <MyEditor 
      editorState={this.state.editorState} 
      handleChange={this.handleChange} 
     /> 
     </div> 
    ); 
    } 
} 

如果您需要在同一页上他们的多个实例，您可以创建的editorStates像这样的数组：

export default class App extends Component { 

    state = { 
    editorStates: [EditorState.createEmpty(), EditorState.createEmpty()] 
    }; 

    handleChange = (index) => (editorState) => { 
    const currentStates = this.state.editorStates 
    const updatedStates = currentStates[index] = editorState 
    this.setState({ editorStates: updatedStates }) 
    } 

    render() { 
    return (
     <div> 
     {this.state.editorStates.map((editorState, index) => 
      <MyEditor 
      editorState={this.state.editorState} 
      handleChange={this.handleChange(index)} 
      /> 
     }) 
     </div> 
    ); 
    } 
} 

我还没有试过运行这段代码，但它应该指向你正确的方向。希望它有帮助，只要让我知道，如果有什么不清楚或不工作！

Answer 2

标记tobiasandersen的答案是正确的，因为它导致我需要做的事情。我被插件语法混乱，它是如何被初始化，但最终去它做的工作在MyComponent如下：渲染编辑器中添加

<MyEditor plugin={this.state.plugin} /> 

然后终于在当

import createRichButtonsPlugin from "draft-js-richbuttons-plugin"; 

    componentWillMount() { 
    const richButtonsPlugin = createRichButtonsPlugin(); 
    this.setState({ 
     plugin: richButtonsPlugin 
    }) 
    } 

然后MyEditor我可以使用

const richButtonsPlugin = this.props.plugin; 
const {ItalicButton, BoldButton, UnderlineButton, OLButton, ULButton, H2Button} = richButtonsPlugin; 

const plugins = [ 
     richButtonsPlugin 
     ]