Tabs组件可否对于标签页内内容进行预先加载

[jin5354]

使用Tabs组件时发现，默认Active以外的标签页只有在切换过去时才会被初始化和渲染。我有一个标签页内部存在一个Log组件，需要在最初既被加载，有没有办法实现预先加载？

DEMO： http://codepen.io/anon/pen/MKdEBP?editors=0011

• The version of antd ： 0.12.1

[afc163]

目前的组件实现貌似暂时不支持。

你可以先这么做。

<Tabs defaultActiveKey="1" onChange={this.handleChange}>
  <TabPane tab="选项卡一" key="1" />
  <TabPane tab="选项卡二" key="2" />
  <TabPane tab="选项卡三" key="3" />
</Tabs>

<ul>
  {this.state.activeKey === '1' ? <li>选项卡内容一</li> : null}
  {this.state.activeKey === '2' ? <li>选项卡内容二</li> : null}
  {this.state.activeKey === '3' ? <li><Test /></li> : null}
</ul>

[sethzhao]

遇到同样问题，用楼上的方法并不能行，问题还是一样的。

[sethzhao]

要把组件直接放出来，用activeKey来决定组件的display属性是block还是none才行。

[qubaomingg]

@slertness: @afc163 的方法思路可行，不过放三目运算符里面貌似不行，可通过visible属性来控制显隐

<Tabs defaultActiveKey="0" onChange={this.onToggleTab}>
{
    <Tabs.TabPane tab={'title1'} key={1} />
    <Tabs.TabPane tab={'title2'} key={2} />
}
</Tabs>
<SomeComponent visible={this.state.activeKey === 0}/>
<SomeComponent visible={this.state.activeKey === 1}/>

[XUGAOBO]

受益匪浅,
其实也可以模拟切换页签的事件

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.