React风格的组件如何从儿童那里访问状态？

Question

我正在尝试弄清楚在使用.map函数时，如何访问父组件中子组件中的状态设置。

我想在地图功能中使用三元元来决定单击磁带中的每个项目中要显示的图标。

我不确定如何访问Navbar中的可见状态变量。图像

我希望这对某人有意义。

export default function Navbar({ children, ...restProps }: IProps) {
  return (
    <Container {...restProps}>
      <Inner>
        <Navbar.List>
          {NavData.map((item, i) => (
            <Navbar.ListItem key={i}>
              <Navbar.Link>
                <Navbar.Image src={visible ? item.openIcon : item.closedIcon} /> <<<< HERE IS MY PROBLEM
                <p>{item.name}</p>
              </Navbar.Link>
            </Navbar.ListItem>
          ))}
        </Navbar.List>
      </Inner>
    </Container>
  );
}

Navbar.List = function NavbarList({ children, ...restProps }: IProps) {
  return <List {...restProps}>{children}</List>;
};

Navbar.ListItem = function NavbarListItem({ children, ...restProps }: IProps) {
  const [visible, setVisible] = useState(false);

  return (
    <Ctx.Provider value={{ visible, setVisible }}>
      <ListItem onClick={() => setVisible((curr) => !curr)} {...restProps}>
        {children}
      </ListItem>
    </Ctx.Provider>
  );
};

Navbar.Link = function NavbarLink({ children, ...restProps }: IProps) {
  return <Link {...restProps}>{children}</Link>;
};

Navbar.Image = function NavbarImage({ children, ...restProps }: IProps) {
  return <Image {...restProps} />;
};