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

Question

刚开始学习Reack 钩子，但我不知道是否可以编写一个简单的钩子（或者我应该使用其他方法，例如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模态窗口，它们使用show和onHide属性来确定/处理可见性，我必须通过restprop 以避免一些副作用。
如果我在我的应用程序中使用我的钩子尝试，我会在任何按钮点击时处理两个模态，所以我想出了一个想法，将一个字符串传递给（按钮和模态），这将告诉确切处理哪个模态，但由于某种原因，这种方法看起来有点错误。

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

标签： javascriptreactjsreact-hooks

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