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) => {

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

Two way binding between React components

html

javascript

reactjs

styled-components