0

我将ReactQuill默认导出与它的道具包装在一个功能组件QuillCustom.js中。这是组件：

import ReactQuill, {Quill} from 'react-quill';
...
const modules = {...},
const formats = {...},
export default function QuillCustom({onChange, value}) {
    return (
        <ReactQuill
            modules={modules}
            formats={formats}
            theme="snow"
            onChange={onChange}
            readOnly={false}
        />
    );
}

我在页面组件中动态导入QuillCustom组件并将道具传递给新QuillNoSSRWrapper组件，如下所示：

const QuillNoSSRWrapper = dynamic(() => import('../Components/quillCustom'), {
    ssr: false,
    loading: () => <p>Loading...</p>,
})

export default function NewArticle(){
    return (
        <QuillNoSSRWrapper
            value={value}
            onChange={handleTextChange}
        />
    )
}

现在，问题是，当我写一个字符时，文本编辑器失去了焦点！我试过了，useRef但没有用。这只是同样的事情，失去了焦点。

我搜索了几个小时，发现这是因为QuillCustom.js每次我输入内容时包装器组件都会重新呈现。如何防止这种重新渲染？

4

0 回答 0