javascript - 编写一个 React 钩子(Hook)来处理鼠标单击时的多个 div 可见性

Question

刚开始了解Reack hooks但我不知道是否可以编写一个简单的钩子(Hook)(或者我应该使用其他方法，例如 useEffect 和 useState)来控制多个对象的可见性通过单击页面上的不同按钮来添加元素。

假设我有一个带有 2 个按钮和 2 个“模态”窗口的简单应用:

const App = () => {
  const [firstModalOpen, toggleFirstModal] = useState(false);
  const [secondModalOpen, toggleSecondModal] = useState(false);

  return (
    <div>
      <button onClick={() => toggleFirstModal(true)}>Open First Modal</button>
      <button onClick={() => toggleSecondModal(true)}>Open Second Modal</button>

      <FirstModal
        {...props}
        show={firstModalOpen}
        toggleModal={toggleFirstModal}
      />

      <SecondModal
        {...props}
        show={secondModalOpen}
        toggleModal={toggleSecondModal}
      />
    </div>
  )
}

const FirstModal = (props) => {
  const { toggleModal, ...rest } = props;

  return (
    <Modal
      { ...rest }
      show={firstModalOpen}
      onHide={() => props.toggleModal(false)}
    >
      First modal content...
    </Modal>
  )
}

const SecondModal = (props) => {
  const { toggleModal, ...rest } = props;

  return (
    <Modal
      { ...rest }
      show={secondModalOpen}
      onHide={() => props.toggleModal(false)}
    >
      Second modal content...
    </Modal>
  )
}

// state hook attempt

const useToggleModal = () => (init) => {
  const [show, setToggleModal] = useState(init);
  const toggleModal = () => setToggleModal(!show);
  return { show, toggleModal };
};

因为那些是 react-bootstrap modal windows，它们使用 show 和 onHide 属性来确定/处理可见性，我必须传递 rest 属性以避免一些副作用。
如果我在我的应用程序中使用我的钩子(Hook)尝试，我会在任何按钮点击时处理两个模态，所以我想出了一个想法来传递一个字符串(给按钮和模态)，它会告诉确切地处理哪个模态，但出于某种原因，这种方法看起来有点不对劲。

在 React 中是否有一种“更智能”的方式来在内部处理这个问题而不是传递字符串？

Answer 1

如果您有多个模态框，并且只有其中一个需要同时打开，那么您必须使用一个状态来存储打开了哪个模态框，有点像具有模态框 ID 的字符串。但是，如果你想打开多个模式，你将以不同的方式存储 isOpen 属性

对于第一种情况，您可以编写如下代码

const App = () => {
  const [openModal, toggleModal] = useState('');

  return (
    <div>
      <button onClick={() => toggleModal('first')}>Open First Modal</button>
      <button onClick={() => toggleModal('second')}>Open Second Modal</button>

      <FirstModal
        {...props}
        show={openModal === 'first'}
        toggleModal={toggleModal}
      />

      <SecondModal
        {...props}
        show={secondModalOpen}
        toggleModal={toggleModal}
      />
    </div>
  )
}

const FirstModal = (props) => {
  const { toggleModal, ...rest } = props;

  return (
    <Modal
      { ...rest }
      show={firstModalOpen}
      onHide={() => props.toggleModal('first')}
    >
      First modal content...
    </Modal>
  )
}

const SecondModal = (props) => {
  const { toggleModal, ...rest } = props;

  return (
    <Modal
      { ...rest }
      show={secondModalOpen}
      onHide={() => props.toggleModal('second')}
    >
      Second modal content...
    </Modal>
  )
}

对于第二种情况，就像您在示例中所写的那样，您可以为第二种情况做的唯一优化是存储模态对象数组并动态呈现它们，或者让每个模态处理自己的切换状态和使用 useImperativeHandle 提供父级可以调用子模态的方法，例如

const App = () => {
  const firstRef = useRef(null);
  const secondRef = useRef(null);

  return (
    <div>
      <button onClick={() => this.firstRef.current.toggleModal()}>Open First Modal</button>
      <button onClick={() => this.secondRef.current.toggleModal()}>Open Second Modal</button>

      <FirstModal
        {...props}
        ref={firstRef}
      />

      <SecondModal
        {...props}
        ref={secondRef}
      />
    </div>
  )
}

const FirstModal = forwardRef((props, ref) => {
 const { showModal, toggleModal } = useToggleModal(false, ref);

  return (
    <Modal
      { ...rest }
      show={showModal}
      onHide={toggleModal}
    >
      First modal content...
    </Modal>
  )
})

const SecondModal = forwardRef((props, ref) => {

  const { showModal, toggleModal } = useToggleModal(false, ref);
  return (
    <Modal
      { ...props }
      show={showModal}
      onHide={toggleModal}
    >
      Second modal content...
    </Modal>
  )
})

// state hook attempt

const useToggleModal = (init, ref) => {
  const [show, setToggleModal] = useState(init);
  const toggleModal = () => setToggleModal(!show);
  useImperativeHandle(ref, () => ({
    toggleModal
  }))
  return { show, toggleModal };
};