Draft Js - 添加一个反应组件

Question

我正在绝望地尝试理解 Draft Js 逻辑，但我没有找到关于该主题的好的教程或文档。

我现在想要的只是一个函数（由下面的按钮触发），它可以在编辑器的末尾添加我的一个反应组件。

然后我希望能够编辑里面的内容，为什么不改变组件类型而不丢失原始文本。

我看过很多很多东西，API 文档、奇怪的函数、地图等等……但我仍然不知道该怎么做。

PS：我的代码目前只是草稿基本编辑器。

谢谢，

吕西安

Answer 1

简答：使用包含编辑器、按钮和添加的组件的容器组件。

React 解决了构建与Composition (as opposed to Inheritance) 交互的“事物”网络的问题。创建一个有状态（“基于类”）组件，将“所有更改的内容”存储在该组件的 state 中，然后当组件内部该组件更改时，您不会丢失任何数据。将数据作为 props 传递给子组件。

DraftJS 文档告诉你如何store editor data in state。

它看起来像这样：

class Container extends React.Component {
  constructor(props) {
    this.state = {
      editorState: EditorState.createEmpty(),
      // Make sure 'MyComponent` is a React component defined in this file or imported from somewhere
      addedComponentType: MyComponent,
      showAddedComponent: false,
    }
  }

  handleEditorChange = (editorState) => this.setState({editorState})
  // shorthand for `this.setState({editorState: editorState})`

  toggleShowAddedComponent = () => this.setState({
    showAddedComponent: !this.state.showAddedComponent
  })

  render() {
    const {addedComponentType: AddedComponent} = this.state
    // Shorthand for `const AddedComponent = this.state.addedComponentType`
    return (
      <Editor editorState={this.state.editorState} onChange={this.handleEditorChange} />
      {this.state.showAddedComponent && <AddedComponent>Hello World!</AddedComponent>}
      <button onClick={this.toggleShowAddedComponent}>
        {this.state.showAddedComponent ? 'Hide' : 'Show'} Added Component
      </button>
    )
  }
}