图片不是base64的话 会重复渲染

[henryhe1993]

class EditorDemo extends React.Component {
  controls = ['undo', 'redo', {
    key: 'font-size',
    title: 'Aa',
    // text: 'B',
  }, 'bold', 'italic', 'underline', 'separator', 'text-align', 'separator', 'link', 'media'] as any;

  media = {
    uploadFn: param => {
      param.success({
        url: 'https://via.placeholder.com/150',
        meta: {
          id: 'xxx',
          title: 'xxx',
          alt: 'xxx',
        }
      })
    }
  }

  state = {
    editorState: BraftEditor.createEditorState(null)
  }

  componentDidMount () {
    const htmlString = `<p>Hello <b>World!</b></p>`;
    const editorState = BraftEditor.createEditorState(htmlString);
    this.setState({ editorState });
  }

  submitContent = async () => {
    const htmlContent = this.state.editorState.toHTML();
    console.log(htmlContent);
  }

  handleEditorChange = (editorState) => {
    this.setState({ editorState })
  }

  render () {
    const { editorState } = this.state
    return (
      <div className="my-component">
        <BraftEditor
          value={editorState}
          media={this.media}
          controls={this.controls}
          onChange={this.handleEditorChange}
          onSave={this.submitContent}
        />
      </div>
    )
  }
}

编辑富文本其他地方时, 比如敲回车换行, 图片会闪烁(重新render?). 若是base64格式的话, 就没有这个问题了.

大概看了下 应该是一个class="bf-media"的div 重新render了. 代码基本都是官网复制下来的, 不知道有没有什么解决方法

----编辑---- 试了下 safari确实是没有这个问题的. mac Chrome Version 74.0.3729.131 (Official Build) (64-bit) 有这个问题.

[uouin]

我chorm浏览器也会遇到这个问题 , safari浏览器没有问题 , 还没找到解决方法

[margox]

你可以在开发者工具中查看图片请求的response header，里面是不是把缓存给关掉了，如果是缓存策略的问题的话，那就需要后段配合改一下了

[henryhe1993]

@margox 之前没注意network, 确实是这个问题. 但是我不太理解的是 为什么我在编辑其他区域的时候, 在disable cache的情况下, 图片会一直请求服务器? 是braft-editor 一直在 mount 和 unmount那个图片的component吗?

[margox]

@henryhe1993 因为在draftjs中，光标和选区其实都是在react state中管理的，所以只要光标变化（包括失去和活的焦点）都会导致整个组件rerender，没有启用缓存的图片，就回去重新加载

[henryhe1993]

@margox 好的，了解了，多谢。