如何将react-draft不受控制的编辑器内容转换为html？

Question

我正在尝试使用react-draft-wysiwyg编辑从服务器获取的数据。问题是我将编辑器放置在render-prop内，所以我无法更改editorState，因为这会导致无限循环。我将编辑器配置为不受控制，只是从表单中获取数据。

据我所知，stateToHTML在这里不合适，因为它需要状态，但是这里有一个对象。您能告诉我，还有其他函数可以在发送之前转换编辑器数据吗？还是选择其他编辑器代替draft-js更好？

表单提交处理程序位于和设计表单的onFinish内部。这是组件列表：

import React, { Component, Fragment } from 'react';
import Line from '../components/Line';
import { Button, Form, Input } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { Get } from 'react-axios';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateFromHTML } from 'draft-js-import-html';

class Info extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        {this.props.lang.lang && (
          <Get url={`${process.env.REACT_APP_API_PORT}api/info/${this.props.lang.lang.info}`}>
            {(error, res, isLoading) => {
              if (error) {
                return (<div>Something bad happened: {error.message} </div>)
              }
              else if (isLoading) {
                return (<div>Loading...</div>)
              }
              else if (res !== null) {
                const { data } = res;
                return (
                  <Fragment>
                    <h1>{data.title}</h1>
                    <Line />
                    <Form
                      layout="vertical"
                      initialValues={{
                        ...data
                      }}
                      onFinish={values => {
                        console.log({
                          ...values,
                          body: values.body,
                        });
                      }}
                    >
                      <Form.Item
                        name="title"
                        label="Title"
                        rules={[{ required: true, message: 'Please enter post title' }]}
                      >
                        <Input placeholder="Please enter post title" />
                      </Form.Item>
                      <Form.Item
                        name="body"
                        label="Text"
                      >
                        <Editor
                          defaultEditorState={EditorState.createWithContent(stateFromHTML(data.body))}
                          wrapperClassName="demo-wrapper"
                          editorClassName="demo-editor"
                        />
                      </Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className='save'
                      >
                        <SaveOutlined />
                        <span>Сохранить</span>
                      </Button>
                    </Form>
                  </Fragment>
                );
              }
              return (<div>Default message before request is made.</div>)
            }}
          </Get>
        )}
      </Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    lang: state.lang
  }
}

export default connect(mapStateToProps, null)(Info);

问候

Answer 1

已解决。有一个draftjs-to-html包，可以将对象从不受控制的编辑器形式解析为html。

import draftToHtml from 'draftjs-to-html';

...

body: draftToHtml(values.body)