如何在草稿 js 编辑器中渲染提供的 HTML？

Question

我使用 Draft.js 编辑器来创建和更新帖子。请告诉我如何在 Draft.js 编辑器中渲染 HTML 文本。\n我尝试使用 renderHTML，但出现错误

\n\n

\n

“\'editorState\' 未定义 no-undef”

\n

\n\n

如果没有 renderHTML 函数，我会在编辑器中获取带有标签的 HTML。\n请告诉我，如何配置组件来呈现“正确的 HTML”？

\n\n

这是清单：

\n\n

import React, { Component } from \'react\';\nimport DatePicker from "react-datepicker";\nimport "react-datepicker/dist/react-datepicker.css";\nimport { EditorState, getCurrentContent, getPlainText, ContentState } from \'draft-js\';\nimport { Editor } from \'react-draft-wysiwyg\';\nimport \'../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css\';\nimport { stateToHTML } from \'draft-js-export-html\';\nimport gql from \'graphql-tag\';\nimport { Mutation } from \'react-apollo\';\nimport renderHTML from \'react-render-html\';\n\nconst updateMutation = gql`\n  mutation UpdateHeroMutation($id: ID!, $title: String!, $description: String!, $date: String!) {\n  updateHero(heroUpdate: {_id: $id, title: $title, description: $description, date: $date}) {\n    _id\n    title\n    description\n    date\n  }\n}\n`;\n\nclass Hero extends Component {\n  constructor(props) {\n    super(props);\n    this.state = {\n      title: \'\',\n      setDate: new Date(),\n      editorState: EditorState.createWithContent(ContentState.createFromText(renderHTML(props.data.description)))\n    };\n  }\n  onChange(e) {\n    this.setState({ title: e.target.value })\n  }\n  onChangeSelect(published) {\n    this.setState({ setDate: published })\n  }\n  onEditorStateChange = (editorState) => {\n    this.setState({\n      editorState\n    });\n  }\n  render() {\n    return (\n      <>\n        <div className="label-section">\xd0\x9d\xd0\xb0\xd0\xb7\xd0\xb2\xd0\xb0\xd0\xbd\xd0\xb8\xd0\xb5:</div>\n        <h5>\n          <input name="title" id="title" type="text" defaultValue={this.props.data.title} onChange={e => this.onChange(e)} />\n        </h5>\n        <br />\n        <div className="label-section">\xd0\x94\xd0\xb0\xd1\x82\xd0\xb0 \xd0\xbf\xd1\x83\xd0\xb1\xd0\xbb\xd0\xb8\xd0\xba\xd0\xb0\xd1\x86\xd0\xb8\xd0\xb8:</div>\n        <DatePicker\n          id="published"\n          name="published"\n          defaultValue=""\n          selected={this.state.setDate}\n          onChange={published => this.onChangeSelect(published)}\n        />\n        <div className="label-section">\xd0\xa0\xd0\xb5\xd0\xb4\xd0\xb0\xd0\xba\xd1\x82\xd0\xb8\xd1\x80\xd0\xbe\xd0\xb2\xd0\xb0\xd1\x82\xd1\x8c \xd1\x82\xd0\xb5\xd0\xba\xd1\x81\xd1\x82:</div>\n        <Editor\n          editorState={this.state.editorState}\n          wrapperClassName="demo-wrapper"\n          editorClassName="demo-editor"\n          onEditorStateChange={this.onEditorStateChange}\n        />\n        <input type="text" className="hidden" defaultValue={this.props.data._id} />\n        <Mutation mutation={updateMutation} variables={{ id: this.props.data._id, title: this.state.title, description: stateToHTML(this.state.editorState.getCurrentContent()), date: this.state.setDate }}>\n          {updateHero => (\n            <button onClick={updateHero} type="submit">OK</button>\n          )}\n        </Mutation>\n      </>\n    );\n  }\n}\n\nexport default Hero;\n

\n\n

将非常感谢任何帮助！

\n

Answer 1

尝试使用draft-js-import-html而不是react-render-html

import React, { Component } from 'react'
import { EditorState } from 'draft-js'
import { stateFromHTML } from 'draft-js-import-html'

class Hero extends Component {
    ...
    constructor(props) {
        this.state = {
            editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
        }
    }
    ...
}