reactjs - 如何从服务器在 React 中渲染 Draft-js 文本

Question

我使用 Draft-js 来构建我的文本编辑器。

我想要做的是点击提交按钮，提交的文本应该出现在右侧(如您所见，空白侧)

我正在调用handleSubmit函数将内容发布到服务器:

handleSubmit = e => {

        e.preventDefault();

        const query = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()));

        const payload = {
            query:query
        }

        axios({
            url:'http://localhost:9000/queries',
            method:'POST',
            data: payload
        })
        
    }

并检索内容:

getQueries(){
        axios.get("http://localhost:9000/queries")
        .then(response => {
            const data = response.data;
            this.setState({queries:data});
        })
    } 

我对如何使用 convertFromRaw 将内容转换为所需的文本感到有点困惑。

我应该在哪里调用该方法？

提前致谢

Answer 1

您必须了解 DraftJS 是一个库，它将编辑器中的任何内容转换为其自己的格式。

例如，apple 转换为，

{
    "blocks": [{
        "key": "f6b3g",
        "text": "apple",
        "type": "unstyled",
        "depth": 0,
        "inlineStyleRanges": [{
            "offset": 0,
            "length": 5,
            "style": "ITALIC"
        }],
        "entityRanges": [],
        "data": {}
    }],
    "entityMap": {}
}

是的，就是这么大。因此，为了将其从这种格式转换回 apple，您需要一个知道如何解释它的组件。您不能只使用 div 标签。在本例中，它是编辑器组件本身!

因此您可以执行以下操作以只读模式显示内容。

<Editor readOnly={true}
  editorState={EditorState.createWithContent(this.state.editorState.getCurrentContent())}/>

现在，假设您要将编辑器内容发送到 API，以便将其保存在数据库中，然后从 API 获取内容并显示它。

1. 从编辑器格式转换为 JSON

const requestBody = JSON.stringify(convertToRaw(this.state.editorState.getCurrentContent()))

将 JSON 发布到您的 API

fetch(url, {
  method: 'POST',
  body: requestBody
});

从 API 获取 JSON

const response = await fetch(url, {
  method: 'GET'
});

从 JSON 转换为编辑器格式并使用编辑器显示(如果您希望用户编辑内容，可以删除只读)

<Editor readOnly={true}
  editorState={EditorState.createWithContent(convertFromRaw(JSON.parse(response))}/>