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

Question

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

假设我有一个带有 2 个按钮和 2 个 "modal" windows:

的简单应用

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 属性来 determine/handle 可见性，我必须传递 rest道具以避免一些副作用。
如果我在我的应用程序中使用我的钩子尝试，我会在任何按钮点击时处理两个模态，所以我想出了一个想法来传递一个字符串（给按钮和模态），它会告诉确切地处理哪个模态，但出于某种原因，这种方法看起来有点不对劲。

React 中是否有 "smarter" 方式来内部处理此问题而不是传递字符串？

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

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

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

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

Writing a React hook to handle multiple divs visibility on mouse click

javascript

reactjs

react-hooks