Question

我正在开发一个需要模式组件的应用程序，该组件当前包含三个道具，这些道具传递给回调应用程序结构中的三个不同模式。我需要实现的是，当单击特定模式的按钮时，向模式包装中添加一个唯一的类，该类将在单击时标识每个模式，从而使用这些模式的选择器来操纵CSS。

请参见下文：

const NWmodal = (props) => {
return (
<Modal>
  <Modalmain data-modal-type="this should pass in a unique id to its modal once button is clicked">
      <div>
        {props.ejectModal}
      </div>
      <div>
        {props.timeModal}
      </div>
      <div>
        {props.leaveModal}
      </div>
    <Close>
      x
    </Close>
  </Modalmain>
</Modal>
);
}
  <NWmodal
    id="timeModal"
    timeModal={<NWtimeModal/>} (callback for timemodal component)
  />
  <NWmodal
    id="leaveModal"
    leaveModal={<NWleaveModal/>} (callback for leavemodal component)
  />
  <NWmodal
    id="ejectModal"
    leaveModal={<NWejectModal/>} (callback for ejectmodal component)
  />

function Nav() {
return (
  <ul>
    <li>
      <button
        href="javascript:void(0)"
        data-modal="timeModal"
        onClick={event}>
         Time Modal
      </button>
    </li>
    <li>
      <button
        href="javascript:void(0)"
        data-modal="leaveModal"
        onClick={event}>
         Leave Modal
      </button>
     </li>
     <li>
      <button
        href="javascript:void(0)"
        data-modal="ejectModal"
        onClick={event}>
         Eject Modal
      </button>
    </li>
  </ul>

）; }

Answer 1

免责声明：我仍在学习React这个东西，但是我可能会采用的方法...

useRef 钩子可用于创建变量，然后可以将其与您的模态相关联作为参考。例如：

const ejectModalRef = useRef()

<NWmodal id="ejectModal" ref={ejectModalRef} />

该节点将在 onClick JS代码中以“ ejectModalRef.current”的身份进行访问。

（不要忘记导入 useRef ，例如：import React, { useRef } from "react";

HTH

使用功能挂钩反应模态组件

1 个答案: