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

Question

我同时使用 react-quilljs 和 reactjs-popup，无法让 quill-based 编辑器显示在我的模式对话框中。我可以在主页上使用编辑器，没有任何问题，但它不会在弹出窗口上工作。

我有预期的导入：

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

当我在 parent 组件中将 showNewIdea 设置为 true 时，会按预期显示弹出窗口，但完全没有羽毛笔编辑器。它呈现 #IdeaDetails div 和 child 即 <div></div>，仅此而已。 child 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;

等待成功，因为显示是真实的

上面的代码之所以有效，是因为弹出窗口 show 设置为 true!

因此，如果 Popup 状态发生变化，它将不起作用！

解决方案：有效的方法

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

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

你可以去游乐场看看here！这包括调试！不明白为什么！

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

本回答未完！本栏目稍后更新！（我会分享一些观察结果！并解释原因）（你可以稍后查看）

Quill 钩子函数

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;
};

第一次实施

单独的组件

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

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

react-quilljs and reactjs-popup don't work together

reactjs

quill

reactjs-popup

react-quilljs

等待成功，因为显示是真实的

解决方案：有效的方法

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

Quill 钩子函数