react-quilljs 和 reactjs-popup 不能一起工作

Question

我正在使用 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是完全空的，没有造型。

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

Answer 1

它工作得恰到好处

也有 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 状态改变，它将不起作用！

解决方案：一些有效的方法

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

一个有效的解决方案！就是包装 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;
};

首次实施

独立组件

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