1

Richbuttons プラグインでドラフト js を使用してきましたが、エディター コンポーネントが 1 つしかない場合はすべて正常に動作します。ただし、ページに複数のコンポーネントを追加しようとすると、リッチ ボタンは最後に追加されたエディターにのみ適用されます。

複数のプラグインの追加について読んだことがありますが、含まれている例では、コンポーネントをプラグインにインポートすることは考慮されていません。私がやろうとしていることは次のようなものです:

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;

そのため、そこで何が起こっているのかを理解するためのリソースをいただければ幸いです。

4

2 に答える 2

1

正直なところ、この行の構文がよくわかりません。

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を 2 回作成しました (実際にはすべての変数で作成しました)。

私がすべきことは次のとおり です。豊富なボタンを備えたエディターを独自のコンポーネントに変えます。次のようになります。

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>
    );
  }
}

私はこのコードを実行しようとはしていませんが、いずれにしても正しい方向を示しているはずです。何か不明な点や機能しない場合はお知らせください。

于 2016-12-01T22:34:24.783 に答える