私は面白い問題に遭遇しています。サーバー側のレンダリング機能に 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);