React 组件之间的两种方式绑定

Question

在导航栏上工作（对移动设备进行更改）- 在移动设备上时，我想使用列表底部的“关闭”按钮垂直显示项目，这会导致导航选项卡被折叠。折叠时，顶部的打开按钮可展开导航栏。我当前的实现实现了关闭栏的折叠，但是导航栏是使用两个组件构建的，所以我想知道如何在两者之间单方面传递isCollapsed。

第一个组件：

const NavigationTabs = ({ className, items }: Props) => {
  const [isCollapsed, setIsCollapsed] = useState(false);

  function menuCollapsed() {
    setIsCollapsed(true);
  }

  return (
    <StyledList className={classNames("nav-tabs", className)}>
      <StyledHeaderBlock />
      {items.map((link) => (
        <NavigationItem key={link.key} link={link} isTab />
      ))}
      <StyledCloseBar isCollapsed={isCollapsed}>
        <StyledCloseText
          onKeyDown={menuCollapsed}
          onClick={menuCollapsed}
          role="button"
          tabIndex={0}
        >
          <Icon isOberonIcon={true} name={"closeMenu"} />
          Close
        </StyledCloseText>
      </StyledCloseBar>
    </StyledList>
  );

当isCollapsed 为真时在StyledCloseBar 上使用setState 和display:none - 然后我想在我的第二个组件中使用该值，以便我可以对CSS 进行类似的更改，这可能吗？

我需要同步这个值，以便两个组件按预期运行？

第二部分：

const NavigationItem = ({
  className,
  isActive = false,
  isTab = false,
  link,
  pathname,
  isCollapsed,

}: Props) => {

  return (
    <StyledTabItem
      className={classNames("nav-item", className, {
        active: isActiveLink,
      })}
      isTab={isTab}
      isActive={isActiveLink}
    >
      <StyledLink
        dataId={link.key}
        href={link.href}
        isActive={isActiveLink}
        isTab={isTab}
        icon={hasIconLink ? oberonIcon : link.icon}
        isNavLink
        isOberonIcon={hasIconLink}
      >
        {link.label}
        <StyledOpenText>
          <Icon isOberonIcon={true} name={"expandMenu"} />
          Open
        </StyledOpenText>
      </StyledLink>
    </StyledTabItem>
  );

Answer 1

改变这一行

<NavigationItem key={link.key} link={link} isTab />

到

<NavigationItem key={link.key} link={link} isTab isCollapsed={isCollapsed} setIsCollapsed={setIsCollapsed} />

然后

const NavigationItem = ({
  className,
  isActive = false,
  isTab = false,
  link,
  pathname,
  isCollapsed,
  setIsCollapsed
}: Props) => {