Reactjs 将js草稿抽象为只处理html I/O的自定义组件

我有一个react组件，它必须抽象出js的草稿。 我的redux存储将具有此

说明
字段，该字段必须是常规HTML字符串。编辑器应该能够获取
值
HTML字符串，并将其解析为自己的内部内容（draftjs内容）。更改内容时，它应使用最终HTML内容触发
onChange
prop。换句话说，它应该对外部世界透明该组件内部的情况

现在，我的组件如下所示：


从“道具类型”导入道具类型
从“React”导入React，{Component}
从'draft js'导入{Editor、EditorState、ContentState、convertFromHTML}
从“草稿js导出html”导入{stateToHTML}
export const getStateFromHTML=（html）=>{
const blocksFromHTML=html&&convertFromHTML（html）
if（blocksFromHTML）{
const state=ContentState.createFromBlockArray(
blocksFromHTML.contentBlocks，
blocksFromHTML.entityMap，
)
返回EditorState.createWithContent（状态）
}
返回EditorState.createEmpty（）
}
导出默认类所见即所得扩展组件{
静态类型={
值：PropTypes.string，
onChange:PropTypes.func，
}
静态defaultProps={
值：“”，
onChange:Function.prototype，
}
状态={editorState:null}
组件willmount（）{
this.setEditorState（this.props.value）
}
componentWillReceiveProps（{value}）{
this.setEditorState（值）
}
onChange=（editorState）=>{
this.setState（{editorState}）
const rawData=stateToHTML（editorState.getCurrentContent（））
this.props.onChange（rawData）
}
setEditorState（值）{
this.setState（{editorState:getStateFromHTML（value）}）
}
render（）{
返回(
)
}
}
设置状态
可能是异步的。它应该被视为一个异步操作，即使大多数时候没有注意到这一点。它会安排对组件本地状态的更新。这可能是您面临的问题

一种可能的解决方案是使用
setState
回调，该回调将在状态更新完成后执行

  onChange = (editorState) => {
    this.setState(
      { editorState },
      () => {
        const rawData = stateToHTML(editorState.getCurrentContent())
        this.props.onChange(rawData)
      }
    )
  }

setState
可能是异步的。它应该被视为一个异步操作，即使大多数时候没有注意到这一点。它会安排对组件本地状态的更新。这可能是您面临的问题

一种可能的解决方案是使用
setState
回调，该回调将在状态更新完成后执行

  onChange = (editorState) => {
    this.setState(
      { editorState },
      () => {
        const rawData = stateToHTML(editorState.getCurrentContent())
        this.props.onChange(rawData)
      }
    )
  }

我知道setState是异步的，不幸的是这不是问题所在。。我认为setState回调并不意味着它已完全更新，只是意味着
状态本身将包含以前
setState
调用中尚未应用的所有数据。无论如何，这不是问题所在。谢谢您的时间。我知道setState是异步的，不幸的是，这不是问题所在。。我认为setState回调并不意味着它已完全更新，只是意味着
状态本身将包含以前
setState
调用中尚未应用的所有数据。无论如何，这不是问题所在。谢谢你抽出时间。