一次插入多個草稿組件

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 
     ]