Question

我有一个包含很长项目列表的页面和一个侧边栏，其中显示了单击某个项目时每个列表项的详细信息。我的侧边栏中的一个组件是一个带有2个选项卡的注释部分，这些注释与所单击的特定项目相关联。我想要发生的是无论你导航到哪个标签，当你点击不同的列表项时，它会跳回到显示标签1.标签没有任何状态与哪一个绑定所示。当单击其他列表项时，如何向下传递给孩子以重新渲染？这是我正在看的一些内容

class CommentsTabs extends React.Component<CommentsTabsProps> {
render() {
return (
  <TabsContainer panelClassName="md-grid" colored={true}>
    <Tabs tabId="simple-tab">{this.filterTabs(this.props.permissions)}</Tabs>
  </TabsContainer>
);
}

private filterTabs = (permissions: string[]): JSX.Element[] => {
const tabsArray: JSX.Element[] = [];
const canPostInternal = permissions.find(p => p === Permissions.PostInternalComments) ? true : false;
const canPostExternal = permissions.find(p => p === Permissions.PostExternalComments) ? true : false;

if (permissions.find(p => p === Permissions.ViewInternalComments)) {
  tabsArray.push(
    <Tab key={"internal-comments-tab"} style={{ marginLeft: 50 }} className={"active"} defaultTabIndex={0} label={"Internal Comments"} >
      {this.props.isFetching ? (
        <CircularProgress id="internal-comments-items-loading" />
      ) : (
        <Comments
          comments={this.props.internalComments}
          onPostComment={this.props.onInternalCommentPost}
          canPost={canPostInternal}
        />
      )}
    </Tab>
  );
}

if (permissions.find(p => p === Permissions.ViewExternalComments)) {
  tabsArray.push(
    <Tab key={"external-comments-tab"} defaultTabIndex={1} style={{ marginLeft: 50 }} label={"External comments"} >
      <Comments
        comments={this.props.externalComments}
        onPostComment={this.props.onExternalCommentPost}
        canPost={canPostExternal}
      />
    </Tab>
  );
}

return tabsArray;

如果有人正在查看external-comments-tab，然后他们点击列表中的其他项目，我希望默认情况下重新呈现自己并重置为焦点{{1 }}

如何告诉子组件重新渲染？

0 个答案: