react+antd+富文本编辑，draftjs-to-html函数式方法实现

（1）函数式结构
如下图设定，
export default connect(({ loading }) => ({
submitting: loading.effects[‘generalCreate/submitRegularForm’],
}))(generalCreate);
其中： submitting: loading.effects[‘generalCreate/submitRegularForm’]为自定义type，点击发布按钮时可以通过dispatch进行判断，可省略。
generalCreate表示定义函数式的名称
//将输入的富文本内容转换为html形式，代码如下，该声明在主函数外部声明，具体有关富文本的介绍请看步骤（2）：
const transformDraftStateToHtml = (editorState) => {
if (!editorState.getCurrentContent) {
return ‘’;
}
return draftToHtml(convertToRaw(editorState.getCurrentContent()));
};

（2）富文本编辑react-draft-wysiwyg
①导入包

import { Editor } from 'react-draft-wysiwyg';
import { EditorState, convertToRaw, ContentState } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

②在return表单样式中加入，代码如下

<FormItem
                        {...formItemLayout}
                        label={"说明"}
                        name="desc"
                       // rules={[ ]}   富文本中规则限制需要做特殊处理，在函数式方法中可以用Form getFieldDecorator转换，但是很麻烦，会有bug不断解决。。
                    >
                        <Editor
                            editorState={value.editorState}
                            editorStyle={{border: '1px solid black', minHeight: 200, paddingLeft: 10}}
                            onEditorStateChange={onEditorStateChange}
                         
                        />
                    </FormItem>

③函数
1、初始化富文本数值

const [value,setValue]=useState({editorState:EditorState.createEmpty()});//初始化富文本内容
const [contentEdit, setContentEdit] = useState('');//拿到最新的带有样式的富文本
   
const onEditorStateChange = (editorState) => {//onEditorStateChange动态改变输入的富文本内容
    setValue({
        editorState:editorState
    })
    let transdata = transformDraftStateToHtml(editorState);
    let Input = transdata
    Input=Input.replace(/<\/?.+?\/?>/g,'');//去样式，得到纯文本内容
    if(Input.length > 1000) {//以此实现富文本字数限制
        message.error({content: "说明长度不能超过1000字 ",duration:3)
    }
    setContentEdit(transdata);
};

附上效果图：

这样就完成了函数式React里面实现富文本编辑框功能的实现！从网上搜了下全是基于类式方法的实现，前端小白探索了很久，终于跨过层层Bug，解决了回显数据、富文本样式显示、规则限定以及在页面显示出有样式的文本内容_{写下此篇，望能帮助到你}