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

刚开始学习，但我不知道是否可以编写一个简单的钩子（或者我应该使用其他方法，例如

useffect

以及

useState

），通过单击页面上的不同按钮来控制多个元素的可见性

假设我有一个简单的应用程序，有两个按钮和两个“模式”窗口：

const-App=（）=>{
常量[firstModalOpen，toggleFirstModal]=useState（false）；
const[secondModalOpen，toggleSecondModal]=useState（false）；
返回(
toggleFirstModal（true）}>打开第一个模式
切换第二模态（真）}>打开第二模态
)
}
常量第一模态=（道具）=>{
const{toggleModal，…rest}=props；
返回(
props.toggleModal（false）}
>
第一模态内容。。。
)
}
const SecondModal=（道具）=>{
const{toggleModal，…rest}=props；
返回(
props.toggleModal（false）}
>
第二模态内容。。。
)
}
//状态钩尝试
const useToggleModal=（）=>（init）=>{
const[show，setToggleModal]=useState（init）；
consttogglemodal=（）=>setToggleModal（！show）；
返回{show，toggleModal}；
};

由于这些是窗口，它们使用

show

和

onHide

属性来确定/处理可见性，我必须通过

rest

prop来避免一些副作用。
如果我在我的应用程序中使用我的钩子尝试，我会在任何按钮点击时处理两个模态，所以我想出了一个主意，传递一个字符串（同时传递给按钮和模态），它会告诉我到底要处理哪个模态，但由于某种原因，这种方法看起来有点错误

---

是否有一种“更聪明”的方法来在内部处理这个问题，而不是传递字符串？

如果您有多个模态，并且一次只需要打开其中一个模态，那么您必须使用一个状态来存储打开的模态，有点像具有模态id的字符串。但是，如果要打开多个模态，则应以不同的方式存储等参线道具

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

const-App=（）=>{
const[openModal，toggleModal]=useState（“”）；
返回(
切换模式（'first'）}>打开第一模式
切换模式（'second'）}>打开第二模式
)
}
常量第一模态=（道具）=>{
const{toggleModal，…rest}=props；
返回(
props.toggleModal（'first'）}
>
第一模态内容。。。
)
}
const SecondModal=（道具）=>{
const{toggleModal，…rest}=props；
返回(
props.toggleModal（'second'）}
>
第二模态内容。。。
)
}

对于第二种情况，正如您在示例中所写的，对于第二种情况，您可以做的唯一优化是存储模态对象数组并动态渲染它们，或者让每个模态处理自己的切换状态，并使用

useImperialiveHandle

提供父级可以调用子模态的方法，如

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

const-App=（）=>{
const firstRef=useRef（null）；
const secondRef=useRef（null）；
返回(
this.firstRef.current.toggleModal（）}>Open First Modal
this.secondRef.current.toggleModal（）}>打开第二个模式
)
}
const FirstModal=forwardRef（（道具，ref）=>{
const{showModal，toggleModal}=usetoglemodal（false，ref）；
返回(
第一模态内容。。。
)
})
const SecondModal=forwardRef（（道具，ref）=>{
const{showModal，toggleModal}=usetoglemodal（false，ref）；
返回(
第二模态内容。。。
)
})
//状态钩尝试
常量UseTogleModal=（初始，参考）=>{
const[show，setToggleModal]=useState（init）；
consttogglemodal=（）=>setToggleModal（！show）；
使用命令式句柄（参考，（）=>({
切换模式
}))
返回{show，toggleModal}；
};

第一个例子正是我想要的，但我正在寻找更像第二个解决方案的东西。试问一下，第二个按钮是否应该在

onClick

处理程序中使用

this.secondRef

？非常感谢您指出

useImperialiveHandle

，这可能正是我需要的：）是的，您是对的，我更新了我的答案。这是我这边的一个小复制粘贴错误没有问题：）再次感谢！很高兴有帮助：-请考虑接受答案，如果它解决了你的问题

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