如何从父节点访问子组件节点

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/