draft.js 导出html,抽象draft-js到自定义组件，只处理html I / O.

我有这个反应组件，必须抽象 draft-js 编辑器 . 我的redux商店将拥有必须是常规HTML字符串的 description 字段 . 编辑器应该能够获取一个 value HTML字符串并将其解析为自己的内部事物(draftjs) . 更改内容时，应使用最终的HTML内容触发 onChange prop . 换句话说，它应该对外部世界透明，这个组件内部正在发生什么 .

现在，我的组件看起来像这样：

import PropTypes from 'prop-types'

import React, { Component } from 'react'

import { Editor, EditorState, ContentState, convertFromHTML } from 'draft-js'

import { stateToHTML } from 'draft-js-export-html'

export const getStateFromHTML = (html) => {

const blocksFromHTML = html && convertFromHTML(html)

if (blocksFromHTML) {

const state = ContentState.createFromBlockArray(

blocksFromHTML.contentBlocks,

blocksFromHTML.entityMap,

)

return EditorState.createWithContent(state)

}

return EditorState.createEmpty()

}

export default class WYSIWYG extends Component {

static propTypes = {

value: PropTypes.string,

onChange: PropTypes.func,

}

static defaultProps = {

value: '',

onChange: Function.prototype,

}

state = { editorState: null }

componentWillMount() {

this.setEditorState(this.props.value)

}

componentWillReceiveProps({ value }) {

this.setEditorState(value)

}

onChange = (editorState) => {

this.setState({ editorState })

const rawData = stateToHTML(editorState.getCurrentContent())

this.props.onChange(rawData)

}

setEditorState(value) {

this.setState({ editorState: getStateFromHTML(value) })

}

render() {

return (

editorState={this.state.editorState}

onChange={this.onChange}

/>

)

}

}

由于某种原因，这是行不通的 . 似乎在实际更新状态之前调用 getCurrentContent . 我真的不能这么想 .

我愿意接受任何[新]方式来处理这种情况;我只需要能够发送HTML值并获取HTML值 . 我也接受其他WYSIWYG插件的指示，这些插件将完成这项工作 .