Reactjs 在react草稿所见即所得编辑器中加载文本时出现问题

在我的项目中，我集成了react draft wysiwyg的编辑器。现在我需要通过加载一些文本数据来测试文本编辑器。我尝试按照以下步骤操作，我的代码当前如下所示：

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw } from 'draft-js';


const content = {
    "entityMap":{

    },
    "blocks":[
       {
          "key":"637gr",
          "text":"Initialized from content state.",
          "type":"unstyled",
          "depth":0,
          "inlineStyleRanges":[

          ],
          "entityRanges":[

          ],
          "data":{

          }
       }
    ]
 };
export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        this.state = {
          contentState,
        }
      }

      onContentStateChange: Function =  (contentState) => {
        this.setState({
          contentState,
        });
      }; 
    render() {
        const { contentState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={this.props.editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        )
    }
}

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw, EditorState } from 'draft-js';

const content = { ... };

export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        const editorState = EditorState.createWithContent(contentState);

        this.state = {
          contentState,
          editorState,
        };
    }

    render() {
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        );
    }
}

import React，{Component}来自'React'；
从“react draft wysiwyg”导入{Editor}；
导入“react draft wysiwyg/dist/react draft wysiwyg.css”；
导入“/textdeditor.css”；
从'draft js'导入{convertFromRaw}；
常量内容={
“entityMap”：{
},
“区块”：[
{
“钥匙”：“637gr”，
“文本”：“已从内容状态初始化。”，
“类型”：“未设置样式”，
“深度”：0，
“inlineStyleRanges”：[
],
“暴君”：[
],
“数据”：{
}
}
]
};
导出默认类RichTextEditor扩展组件{
建造师（道具）{
超级（道具）；
const contentState=convertFromRaw（内容）；
此.state={
内容国，
}
}
onContentStateChange:Function=（contentState）=>{
这是我的国家({
内容国，
});
}; 
render（）{
const{contentState}=this.state；
返回(
)
}
}

---

我试图按照文档进行操作，但json没有加载。我试图理解解决方法，但无法理解，因为我以前从未使用过DraftJS。有人能帮我吗

您必须使用

EditorState.createWithContent

根据内容数据创建编辑器状态，并将其传递给

editor

组件，如下所示：

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw } from 'draft-js';


const content = {
    "entityMap":{

    },
    "blocks":[
       {
          "key":"637gr",
          "text":"Initialized from content state.",
          "type":"unstyled",
          "depth":0,
          "inlineStyleRanges":[

          ],
          "entityRanges":[

          ],
          "data":{

          }
       }
    ]
 };
export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        this.state = {
          contentState,
        }
      }

      onContentStateChange: Function =  (contentState) => {
        this.setState({
          contentState,
        });
      }; 
    render() {
        const { contentState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={this.props.editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        )
    }
}

import React, { Component } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import './textEditor.css';
import { convertFromRaw, EditorState } from 'draft-js';

const content = { ... };

export default class RichTextEditor extends Component {

    constructor(props) {
        super(props);
        const contentState = convertFromRaw(content);
        const editorState = EditorState.createWithContent(contentState);

        this.state = {
          contentState,
          editorState,
        };
    }

    render() {
        const { editorState } = this.state;
        return (
            <div>
                <Editor
                    editorClassName={"report-editor"}
                    editorState={editorState}
                    onEditorStateChange={this.props.onEditorStateChange}
                    onContentStateChange={this.props.onContentStateChange}
                />
            </div>
        );
    }
}

import React，{Component}来自'React'；
从“react draft wysiwyg”导入{Editor}；
导入“react draft wysiwyg/dist/react draft wysiwyg.css”；
导入“/textdeditor.css”；
从'draft js'导入{convertFromRaw，EditorState}；
常量内容={…}；
导出默认类RichTextEditor扩展组件{
建造师（道具）{
超级（道具）；
const contentState=convertFromRaw（内容）；
const editorState=editorState.createWithContent（contentState）；
此.state={
内容国，
编辑状态，
};
}
render（）{
const{editorState}=this.state；
返回(
);
}
}

---

您可以通过

查看控制台中显示的实时示例？我以前没有见过像

onContentStateChange=Function=（contentState）=>{…}

这样的东西。看起来你有一堆基本的反应相关的错误。试着看看许多Draft.js代码笔中的一些，例如。

onContentStateChange=Function=（contentState）=>{…}

它在文档中说的就是正确的。（在数据转换部分下）你能提供一个链接吗？这是一个打字错误，我替换了行检查它。仍然不起作用@oozywaters似乎已经为您提供了答案，但是在将来，如果您遇到错误，请记住包含错误消息。谢谢，我花了3个小时找到了这个！