如何從父節點訪問子組件節點

Question

我正在嘗試實現一項功能以在單擊菜單組件外部時關閉它。 為此，我檢查當前目標是否存在於 ref 節點中。 問題是當我點擊 Icon 組件時...檢查它，e.target 恰好是來自 Icon 組件的 img，如果我在 ref.current 上搜索它，它不存在...有沒有辦法鏈接 parent 和當我點擊一個子組件時，子節點一起實現這個條件 ref.current.contains(e.target)？

父組件：

function Menu ({showMenu, close}) {
   const ref = useRef(null)
   useEffect(() => {
        document.addEventListener('click', handleClickOutside)

        return () =>{
            document.removeEventListener('click', handleClickOutside)
        }
    }, [])

    function handleClickOutside(e) {
        if (ref.current && !ref.current.contains(e.target) && showMenu) {
            close()
        }
    }

    return (
      <div ref={ref}>
          <Icon action={openMenu2}/>
          <h1>Menu</h1>
      </div>
    )

}

孩子

function Icon ({action}) {
    return (
        <div onClick={() => action()}>
            <i>
                <img src={imageSrc} alt="icon"></img>
            </i>
        </div>
    )
}

Answer 1

如果你只想使用子組件的 ref，你可以將 ref 傳遞給 props.action

//Child

const cRef = useRef(null)

function Icon ({action}) {
    return (
        <div ref= onClick={() => action(cRef)}>
            <i>
                <img src={imageSrc} alt="icon"></img>
            </i>
        </div>
    )
}

然后你可以在父組件中使用它

或者你可以將這些邏輯移動到子組件

為此，我檢查當前目標是否存在於 ref 節點中。 問題是當我點擊 Icon 組件時......檢查它，e.target 恰好是來自 Icon 組件的 img，如果我在 ref.current 上搜索它，它不存在......

Answer 2

你可以通過 menu toggle function 直接給 down children 給 children，

切換 Function

使用這種方法，您無需檢查 showMenu 是否為真，因為此 function 將在打開時關閉菜單，如果關閉則打開

假設您的 state 位於 Menu 組件的父級

 const toggleMenu = () => {
    setMenuOpen(!menuOpen);
  };

然后在 Menu 組件中傳遞 menuOpen 作為菜單的 state 和 toggleMenu 作為 function 來改變它。

function Menu({ toggleMenu, menuOpen }) {
  return (
    <div style={{ display: "flex", alignItems: "center" }}>
      <Icon toggleMenu={toggleMenu} />
      <h1>Menu : {`${menuOpen ? "open" : "closed"} in Menu component`}</h1>
    </div>
  );



}

在圖標組件中，您可以切換菜單

function Icon({ toggleMenu }) {
  return (
    <div onClick={toggleMenu}>
      <img
        style={{ width: 35, cursor: "pointer" }}
        alt="hamburger-menu"
        src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png"
      />
    </div>
  );
}
export default Icon;

在 codesandbox 上運行： https://codesandbox.io/s/eager-joliot-zb3t7?file=/src/Menu.jsx:54-299

如果您的應用因傳遞狀態和傳遞 state 更改函數而變得復雜，我建議您檢查 redux 模式。

此處鏈接為 redux： https://react-redux.js.org/