如何正确显示 React Quill 自定义工具栏？

问：

我正在使用 React Quill，我需要一个自定义工具栏，因为我想在工具栏的最右侧添加两个按钮。

问题是，由于 UI 设计，我希望这个工具栏有条件地呈现（基于状态）。isOpen

这是我的代码：

import { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import './OpinionInput.css';

const OPINION_PLACEHOLDER = 'Qual sua opinião?';


export default function OpinionInput() {
  const [isOpen, setIsOpen] = useState(false);
  const [value, setValue] = useState('');
  
  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  const CustomToolbar = () => {
    return (
      <div
        className={`
          flex justify-between items-center
        `}
        style={{ display: isOpen ? 'flex' : 'none' }}
      >
        <div id="toolbar">
          <button className="ql-bold"></button>
          <button className="ql-italic"></button>
        </div>
  
        <div className="space-x-3">
          <button
            className={`
              ql-custom text-grey-500 text-center focus:outline-none
              hover:text-grey-700 hover:bg-grey-100
            `}
            onClick={handleClose}
          >
            Cancelar
          </button>
  
          <button
            className="bg-brandGreen text-greys-0 px-3 py-1 rounded-full"
          >
            Opinar
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="flex flex-col">
      <div
        className={`
          flex flex-row items-center space-x-2
          ${isOpen ? 'visible' : 'hidden'}
        `}
      >
        <div
          className="w-8 h-8 bg-brandGreen rounded-full"
        ></div>

        <span className="text-body-medium">Pedro Silva</span>
      </div>

      <ReactQuill
        theme="snow"
        value={value}
        onChange={setValue}
        placeholder={OPINION_PLACEHOLDER}
        modules={{
          toolbar: { container: '#toolbar' },
        }}
        onFocus={handleOpen}
      />

      <CustomToolbar />
    </div>
  )
}

所以基本上如果 isOpen 为 true，则工具栏应该被渲染，否则就不应该渲染。 CustomToolbar 仅呈现包含 className=“space-x-3” 的 div，但 id 为“toolbar”的 div 不呈现。

重要工具栏 div 不会在 isOpen 变成 false 之后呈现（这意味着，一旦 div 被“卸载”，它就不会再次挂载）。