Slate JS：將prop設置為Editor的值

Question

我正在使用Slate JS編輯器構建textarea電子郵件表單。 我不想顯示默認的初始狀態值，而是顯示自己的值，該值作為來自redux的prop傳遞給組件。

所以代替這個：

        <Editor
    spellCheck
    autoFocus
    placeholder="Enter your text..."
    ref={this.ref}
    **value = {this.state.value}**
    onPaste={this.onPaste}
    onChange={this.onChange}
    renderNode={this.renderNode}
    renderMark={this.renderMark}
    />

我正在這樣做：

        <Editor
    spellCheck
    autoFocus
    placeholder="Enter your text..."
    ref={this.ref}
    **value = {Value.fromJSON(JSON.stringify(this.props.richText))}**
    onPaste={this.onPaste}
    onChange={this.onChange}
    renderNode={this.renderNode}
    renderMark={this.renderMark}
    />

因此，該prop作為對象傳遞，首先轉換為json，然后轉換為所需的slate編輯器格式。 這不會破壞組件，但是值不會顯示在編輯器中。 我在做什么錯，將slate編輯器值設置為prop的正確方法是什么？ 感謝您對此的任何幫助！

Answer 1

該value在石板比文本字段的只是價值要多得多，而且基本上存儲所有關於板岩編輯器中的數據。

要從道具傳遞數據，您需要反序列化this.props.richText並將其存儲在狀態中，然后在每次Editor更改時更新state的value 。 如果您需要純文本編輯器，請按照以下步驟進行操作。

import { Editor } from 'slate-react'
import Plain from 'slate-plain-serializer'
​
class App extends React.Component {
  state = {
    value: Plain.deserialize(this.props.richText),
  }
​
  onChange = ({ value }) => {
    this.setState({ value })
  }
​
  render() {
    return <Editor value={this.state.value} onChange={this.onChange} />
  }
}

如果您想使用富文本或html編輯器，則反序列化會涉及更多一些，但是如果遵循以下指南，則非常簡單：

• 保存和加載HTML內容
• 富文本示例和代碼