无法在 componentDidMount 中加载的 react-draft-wysiwyg 编辑器中编辑文本

Question

我在我的 React / Redux 项目中使用 react-draft-wysiwyg.Editor 和 SSR。编辑器使用 DOM 生成工具栏的下拉菜单，因此为了防止 SSR 出现问题，我在 componentDidMount 中创建了编辑器。组件显示正确，可以选择内容，但无法编辑任何内容。

如果我不等待 componentDidMount() 直接将 Editor 放入 render() 中，内容是可编辑的，但是从 SSR 直接加载时，工具栏的下拉菜单不会生成，因为 react-draft-wysiwyg.编辑器使用 DOM。

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';
import { stateToHTML } from 'draft-js-export-html';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    const
      {
        state,
        onEditorStateChange,
      } = this,
      {
        editorState,
      } = state,
      editor = (
        <Editor
          editorState={editorState}
          onEditorStateChange={onEditorStateChange}
        />
      );

    this.setState({
      ...state,
      editor: editor,
    });
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  render() {
    const
      {
        props,
        state,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(editor) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;

编辑器内容不可编辑。

我没有任何错误消息。我一无所知……

Answer 1

编辑器无法通过状态。所以我设置了一个等待 componentDidMount 的布尔条件。

import React from 'react';
import PropTypes from 'prop-types';
import { Form } from 'antd';
import { EditorState, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import htmlToDraft from 'html-to-draftjs';

class Wysiwyg extends React.Component {
  constructor(props) {
    super(props);

    this.html = props.data;

    const contentBlock = typeof window !== 'undefined' ? htmlToDraft(this.html) : null;

    if(contentBlock) {
      const
        contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks),
        editorState = EditorState.createWithContent(contentState);

      this.state = {
        editorState: editorState,
        editor: null,
      };
    } else {
      this.state = {
        editorState: null,
        editor: null,
      };
    }

  }

  componentDidMount() {
    this.setState({
      editor: true,
    });
  }

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  };

  render() {
    const
      {
        props,
        state,
        onEditorStateChange,
      } = this,
      {
        form,
        fieldId,
      } = props,
      {
        editorState,
        editor,
      } = state,
      {
        getFieldDecorator,
      } = form;

    const fieldOptions = {
      initialValue: editorState,
    }

    return (
      <Form.Item
        hasFeedback
        label="DESCRIPTION"
      >
        {editor ? getFieldDecorator(fieldId, fieldOptions)(
          <Editor
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}
          />
        ) : null}
      </Form.Item>
    );
  }
}

export default Wysiwyg;