1

私は面白い問題に遭遇しています。サーバー側のレンダリング機能に NextJS を使用し、リッチテキスト エディターとして ReactQuill を使用しています。ReactQuill の DOM への結びつきを回避するために、動的にインポートしています。ただし、これは ReactQuill コンポーネントに ref をアタッチしようとすると、ReactQuill コンポーネントではなく読み込み可能なコンポーネントとして扱われるという別の問題を引き起こします。リッチテキスト エディターにアップロードするときの画像の処理方法をカスタマイズするには、ref が必要です。現在、ref は、画像処理をカスタマイズするために .getEditor() を使用できる関数の代わりに current:null を返します。

どうすればこれに対処できるかについて、誰か考えがありますか? ref-forwarding を試してみましたが、React-Quill ではなく、ロード可能なコンポーネントにまだ ref を適用しています。これが私のコードのスナップショットです。

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);
4

3 に答える 3