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

Posted 2023-03-05

【中文标题】React 组件之间的两种方式绑定

【英文标题】：Two way binding between React components

【发布时间】：2021-10-16 18:48:40

【问题描述】：

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

【参考方案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) => 

【讨论】：

谢谢 Ayush - 但是当我在组件 2 中创建 menuExpanded 函数时，我仍然遇到“isCollapsed”不是函数的问题，类似于组件 1 中的 menuCollapsed 来处理单击事件并随后在菜单上单击打开按钮时将 isCollapsed 更改为 false？

@sicun 你可以使用 setIsCollapsed 在 props 中传递来改变状态