在NextJS中使用动态导入时如何访问ReactQuill Ref？

Question

我遇到一个有趣的问题。我将NextJS用于其服务器端呈现功能，并将ReactQuill作为我的富文本编辑器。为了避开ReactQuill与DOM的联系，我正在动态导入它。但是，这带来了另一个问题，当我尝试将ref附加到ReactQuill组件时，它被视为可加载组件而不是ReactQuill组件。我需要ref，以自定义将图像上传到RTF编辑器时的处理方式。现在，ref返回current：null，而不是我可以使用.getEditor（）来自定义图像处理的函数。

有人对如何解决这个问题有任何想法吗？我尝试了ref-forwarding，但是它仍然将ref应用于可加载组件，而不是React-Quill组件。这是我的代码的快照。

const ReactQuill = dynamic(import('react-quill'), { ssr: false, loading: () => <p>Loading ...</p> }
);

const ForwardedRefComponent = React.forwardRef((props, ref) => {return (
    <ReactQuill {...props} forwardedRef={(el) => {ref = el;}} />
)})

class Create extends Component {
    constructor() {
        super();
        this.reactQuillRef = React.createRef();
    }

    imageHandler = () => {
         console.log(this.reactQuillRef); //this returns current:null, can't use getEditor() on it.
    }
    render() {
    const modules = {
      toolbar: {
          container:  [[{ 'header': [ 2, 3, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'script': 'sub'}, { 'script': 'super' }],
            ['link', 'image'],
            [{ 'indent': '-1'}, { 'indent': '+1' }],    
            [{ 'align': [] }],
            ['blockquote', 'code-block'],],
          handlers: {
             'image': this.imageHandler
          }
        }
     };
         return(
             <ForwardedRefComponent 
                value={this.state.text}
                onChange={this.handleChange}
                modules={modules}
                ref={this.reactQuillRef}/> //this.reactQuillRef is returning current:null instead of the ReactQuill function for me to use .getEditor() on
         )
    }
}

const mapStateToProps = state => ({
    tutorial: state.tutorial,
});

export default connect(
    mapStateToProps, {createTutorial}
)(Create);

Answer 1

@@ user3783615我遇到了同样的问题。我将不胜感激，如果您能帮助为我编写一个已解决的示例代码。拜托，这将挽救我的生命，谢谢。