Draft.js (react-draft-wysiwyg)：从编辑器组件外部进行文本更新不起作用

我正在尝试将文本从调用组件更新到编辑器组件中。我用props从调用者传递文本，但是当文本更改（内容编辑器中更新属性）时，编辑器组件中的文本不是：

下面是调用组件的代码：

<ControlledEditor htmlContent={this.state.validationResultContent}/>

这是受控编辑器的代码：

    export class ControlledEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createWithText(this.props.htmlContent)};
    }


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

    render() {

        const { editorState } = this.state;

        return (
            <>
                <Container className="mt-5">
                    <Row>
                        <Editor
                            editorState= {editorState}
                            onEditorStateChange={this.onEditorStateChange}
                            wrapperClassName="demo-wrapper"
                            editorClassName="demo-editor"

                        />
                    </Row>
                </Container>
            </>
        );
    }
}

ControlledEditor.propTypes = {
    htmlContent: PropTypes.string
}

谢谢您的帮助

------- 更新 1 -------

• 我在用着反应草案所见即所得构建到 Draft.js 上
• 要呈现的文本是 HTML，所以我更新了代码
• 回答来自琳达·派斯特 with 组件更新解决了主要问题link https://stackoverflow.com/a/69239847/121804

遵循工作代码（对我来说）：

export class ControlledEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {editorState: EditorState.createEmpty()}
    }

    componentDidUpdate(prevProps) {
        if (this.props.htmlContent !== prevProps.htmlContent) {
            this.setState({
                    editorState: EditorState.createWithContent(ContentState.createFromBlockArray(convertFromHTML(this.props.htmlContent)))
            });
        }
    }

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

    render() {
        const {editorState} = this.state;
        return (
            <>
                <Container className="mt-5">
                    <Row>
                        <Editor
                            editorState={editorState}
                            wrapperClassName="demo-wrapper"
                            editorClassName="demo-editor"
                            onEditorStateChange={this.onEditorStateChange}
                        />
                    </Row>
                </Container>
                <Container className="mt-5">
                    <Row>
                        <div dangerouslySetInnerHTML={{__html: this.props.htmlContent}}/>
                    </Row>
                </Container>
              
            </>
        );
    }
}

ControlledEditor.propTypes = {
    htmlContent: PropTypes.string
}

可选：更新 Draft.js 版本

您正在使用的某些属性似乎没有记录。也许它们来自以前的版本draft-js？但我会根据当前文档来写这个答案。

The onEditorStateChange的支柱Editor应该重命名为onChange https://draftjs.org/docs/api-reference-editor#onchange.

没有createFromText on EditorState。此替换涉及两个步骤：

1. ContentState可以使用静态方法从文本创建ContentState.createFromText https://draftjs.org/docs/api-reference-content-state#createfromtext.
2. EditorState可以从创建ContentState使用静态方法EditorState.createWithContent https://draftjs.org/docs/api-reference-editor-state#createwithcontent

所以初始状态应该是：

this.state = {
  editorState: EditorState.createWithContent(
    ContentState.createFromText(this.props.htmlContent)
  )
};

核心问题

这样，我就可以运行您的代码并重现您的问题：

我使用 props 传递来自调用者的文本，但是当文本更改（props 在 ContentEditor 中更新）时，编辑器组件中的文本不会更新。

你正在创造this.state.editorState基于的价值this.props.htmlContent 在构造函数中。该部分代码仅在以下情况下运行一次：ControlledEditor首先安装组件。当 props 改变时它会重新运行，所以它无法响应this.props.

你需要添加一个componentDidUpdate https://reactjs.org/docs/react-component.html#componentdidupdate生命周期方法。

componentDidUpdate(prevProps) {
  if (this.props.htmlContent !== prevProps.htmlContent) {
    this.setState({
      editorState: EditorState.createWithContent(
        ContentState.createFromText(this.props.htmlContent)
      )
    });
  }
}

在我看来，将其转换为函数组件并使用钩子更容易。

import { useEffect, useState } from "react";
import { Editor, EditorState, ContentState } from "draft-js";
import "draft-js/dist/Draft.css";

// helper function
const createState = (text) => {
  return EditorState.createWithContent(ContentState.createFromText(text));
};

const ControlledEditor = ({ htmlContent }) => {
  // define the local state, using the createState callback to create the initial value
  const [editorState, setEditorState] = useState(createState(htmlContent));

  // override the local state any time that the props change
  useEffect(() => {
    setEditorState(createState(htmlContent));
  }, [htmlContent]);

  return (
    <Editor
      editorState={editorState}
      onChange={setEditorState}
    />
  );
};

export default function App() {
  const [text, setText] = useState("Hello World");
  return (
    <div>
      <h2>Source Text</h2>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <h2>Editor</h2>
      <ControlledEditor htmlContent={text} />
    </div>
  );
}