呈現模態后調用 function

Question

我在 reactstrap Modal 中有一個 div，我想調用我的 function 來獲取這個 div 的屬性（在它被渲染之后）。 我在useEffect上嘗試過 useEffect，我在那個 div 上嘗試過modalShow ，我試過在 div 中調用 function。

<div
  custom-attribute="VALUE"
  ref={modalRef}
>
    {handleModalLoad()}
</div>

但問題是我的 function 即handleModalLoad()在呈現模式之前被執行，因此我無法從該屬性中獲取值。

Answer 1

嘗試使自定義 div 成為組件並在內部使用useEffect將值發送出去。

如果沒有依賴數組， useEffect只會在該組件渲染時運行。 您可以使用 useRef 獲取該值，並通過useRef中的回調useEffect將其發送出去。

如果您還需要在另一個模式中獲取任何屬性值，則可以重用此組件。

示例：（另請查看現場演示： stackblitz ）

import React, { useState, useEffect, useRef } from 'react';

export function MyDiv({ handleModalLoad }) {
  const myDivRef = useRef(null);

  // 👇 only run when this component renders
  useEffect(() => {

    // 👇 get value from custom attribute
    const { customAttribute } = myDivRef.current.dataset;
    if (!customAttribute) return;

    // 👇 run the function needed
    handleModalLoad(customAttribute);
  }, []);

  return (
    <div data-custom-attribute="VALUE" ref={myDivRef}>
      <h2>This is my div in modal</h2>
    </div>
  );
}

export default function App() {
  const [modalOpen, setModalOpen] = useState(false);
  const [myValue, setMyValue] = useState('');
  return (
    <>
      <div>
        <h1>{`Click button to get: ${myValue}`}</h1>
        <button onClick={() => setModalOpen(true)}>OPEN MODAL</button>
        {modalOpen && <MyDiv handleModalLoad={(value) => setMyValue(value)} />}
      </div>
    </>
  );
}

希望這會有所幫助！

Answer 2

<div
  custom-attribute="VALUE"
  ref={modalRef}
>
    {handleModalLoad()}
</div>

是的，無論最新的ref值如何，您的 function 都會運行。

做這個

const someRef=useRef(null)

useEffect(()=>{
     handleModalLoad()
},[someRef])

{
isModalOpen && <div
  custom-attribute="VALUE"
  ref={someRef}
>
</div>
}