6

我正在同时使用 react-quilljs 和 reactjs-popup，并且无法在我的模式对话框中显示基于 quill 的编辑器。我可以在主页上毫无问题地使用编辑器，但它在弹出窗口上不起作用。

我有预期的进口：

import React from "react";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
import { useQuill } from "react-quilljs";

我的组件看起来像这样：

const NewIdeaDialog = ({ showNewIdea }) => {
  const { quill, quillRef } = useQuill();
  return (
    <Popup open={showNewIdea} nested>
      <div>
        <form action="" method="">
          <label for="IdeaDetails">Details</label>
          <div style={{ width: 500, height: 300 }} id="IdeaDetails">
            <div ref={quillRef} />
          </div>
        </form>
      </div>
    </Popup>
  );
}

当我在父组件中设置showNewIdea为时true，弹出窗口按预期显示，但羽毛笔编辑器完全丢失。它呈现了#IdeaDetails div和一个孩子，就是<div></div>这样。孩子div完全是空的，没有造型。

我是否错过了可以使这项工作发挥作用的东西？我在网上找不到针对此问题列出的任何类似问题。

4

1 回答 1

3

它工作得很好

在此处输入图像描述

也有 qill css

import 'quill/dist/quill.snow.css';

相同的代码运行良好

import React from "react";
import Popup from "reactjs-popup";
import "reactjs-popup/dist/index.css";
import { useQuill } from "react-quilljs";
import './App.css';
import 'quill/dist/quill.snow.css'; // <<<====

function App({showNewIdea}) {
  const { quill, quillRef } = useQuill();
  return (
    <Popup open={true} nested> {/* <======= set to true */}
      <div>
        <form action="" method="">
          <label for="IdeaDetails">Details</label>
          <div style={{ width: 500, height: 300 }} id="IdeaDetails">
            <div ref={quillRef} />
          </div>
        </form>
      </div>
    </Popup>
  );
}

export default App;

等待它有效，因为显示是真实的

上面的代码工作，因为弹出显示，设置为true！

因此，如果 Popup 状态发生更改，它将无法正常工作！

解决方案：有效的东西

作为@软件工程师！评论里提到了！他问图书馆的作者！你可以在这里查看

一个有效的解决方案！是包装弹出窗口中的元素！有自己的组件！并在那里启动quil！穿过useQuill钩子！

import "reactjs-popup/dist/index.css";
import "quill/dist/quill.snow.css"; // Add css for snow theme
// or import 'quill/dist/quill.bubble.css'; // Add css for bubble theme

export default () => {
  const [showNewIdea, setShowNewIdea] = useState(false);

  const togglePopup = () => setShowNewIdea(!showNewIdea);

  return (
    <div>
      <input type="button" value="open" onClick={togglePopup} />
      <Popup open={showNewIdea} nested>
        <NewIdeaDialog />
      </Popup>
    </div>
  );
};

const NewIdeaDialog = () => {
  const { quillRef } = useQuill();
  return (
    <div>
      <form action="" method="" style={{ width: "100%", height: "100%" }}>
        <label for="IdeaDetails">Details</label>
        <div style={{ width: "100%", height: "100%" }} id="IdeaDetails">
          <div ref={quillRef} />
        </div>
      </form>
    </div>
  );
};

你可以在这里查看游乐场！这包括调试！不明白为什么！

问题出在哪里，我们可以从中学到什么

这个答案还没完！本栏目稍后更新！（我将分享一些观察结果！并解释原因）（您可以稍后查看）

鹅毛钩功能

export const useQuill = (options: QuillOptionsStatic | undefined = { theme, modules, formats }) => {
  const quillRef: RefObject<any> = useRef();

  const [isLoaded, setIsLoaded] = useState(false);
  const [obj, setObj] = useState({
    Quill: undefined as any | undefined,
    quillRef,
    quill: undefined as Quill | undefined,
    editorRef: quillRef,
    editor: undefined as Quill | undefined,
  });

  useEffect(() => {
    if (!obj.Quill) { obj.Quill = require('quill') as Quill; }
    if (obj.Quill && !obj.quill && quillRef && quillRef.current && isLoaded) {
      const opts = assign(options, {
        modules: assign(modules, options.modules),
        formats: options.formats || formats,
        theme: options.theme || theme,
      })
      const quill = new obj.Quill(quillRef.current, opts);

      setObj(assign(assign({}, obj), { quill, editor: quill }));
    }
    setIsLoaded(true);
  }, [obj.Quill]);

  return obj;
};

首次实施

在此处输入图像描述

单独的组件

在此处输入图像描述

期待更新以解释如何以及为什么！还有细节！

于 2021-07-18T20:49:30.050 回答