使用 TabPanel 时仅呈现活动选项卡并且仅在第一次

Question

我正在使用 ExtReact TabPanel 组件创建一个包含多个选项卡的应用程序。默认行为似乎是在呈现 TabPanel 期间呈现所有选项卡。但是，我只想呈现活动选项卡并仅在第一次单击时呈现它（除非用户在选项卡内执行某些操作以要求重新呈现）。我一直在玩听众和激活事件，但我对控制集不太熟悉，不知道我在做什么。下面是我目前所拥有的，看起来选项卡甚至在激活事件被触发之前就已经呈现了，所以不确定这是否是正确的位置。

<TabPanel 
            id="adminTabs"
            flex={1}
            shadow 
            defaults={{
                cls: "card",
                layout: "center"
            }}
            listeners= {{
                scope: this,
                activate: (newActiveItem, tab, oldActiveItem, eOpts) => {
                    //alert(JSON.stringify(newActiveItem.id))
                },
                //activeItemChange: ( sender, value, oldValue, eOpts ) => {
                //    alert(value.id)
                //    alert(oldValue.id)
                //}
            }}
        >
            <Container id="lookupsTab" title="Lookups" layout="center">
                <Container layout="fit" fullscreen><LookupsLanding/></Container>
            </Container>
            <Container title="Configuration" layout="center">
                <Container>Configuration Content</Container>
            </Container>
            <Container id="usersTab" title="Users" layout="center">
                <Container layout="fit" fullscreen><UsersLanding/></Container>
            </Container>
            <Container title="Application Errors" layout="center">
                <Container>Application Errors Content</Container>                
            </Container>
        </TabPanel>

Answer 1

也许您正在寻找 onAfterRender 侦听器:

<Container 
    onAfterRender={{
        single: true, // handler will only be called once
        fn: () => {...} // handler which You are looking for - called once a time after view has been rendered
    }}
    id="lookupsTab" title="Lookups" layout="center">
    <Container layout="fit" fullscreen><LookupsLanding/></Container>
</Container>

Answer 2

我最终通过跟踪组件状态中激活的选项卡解决了这个问题。在 TabPanel.onActiveItemChange 上，我调用了一个函数来记录单击了哪个选项卡并将其存储在组件状态中，如下所示：

handleTabClick = (sender, value, oldValue, eOpts) => {
    let { activatedTabs } = this.state;
    if (!activatedTabs.includes(value.id)){
        activatedTabs.push(value.id);
        this.setState({ activatedTabs: activatedTabs })
    }
}

然后在我的每个选项卡上，我都将它们包裹在状态检查中：

render(){
    const { activatedTabs } = this.state;
    ...
    {   activatedTabs.includes("lookupsTab") ? (
           <Container layout="fit" fullscreen><LookupsLanding/</Container>
        ) : null                        
    }

使用 TabPanel 时仅呈现活动选项卡并且仅在第一次

While using TabPanel only render active tab and only the first time

javascript

extjs

reactjs

extreact