Antd Design 使用tabBarExtraContent

1.Antd Design 使用tabBarExtraContent,想讓這個附加的內容在某些頁面顯示,某些頁面不顯示

const PANE_KEY = '1';
@observer
class LadderIndex extends React.Component {
  state = {
    paneKey: PANE_KEY,
  }

  onChangePane = (key) => {
    this.setState({
      paneKey: key,
    });
  };

  createBarExtraContent = () => {
    return (
      this.state.paneKey === '1' &&
      (<div>
        這裏放置的就是附加的內容
      </div>)
    );
  }

  render() {
    if (LadderStore.listLoading) return <Loading />;
    return (
      <div>
        <Card
          style={{ margin: 15 }}
        >
          <Tabs
            defaultActiveKey="1"
            onChange={this.onChangePane}
            tabBarExtraContent={this.createBarExtraContent()}
          >
            <TabPane tab={__('TabPane1', 'ladder')} key="1">

            </TabPane>
            <TabPane tab={__('TabPane2', 'ladder')} key="2">

            </TabPane>
          </Tabs>
          <br />
        </Card>
      </div>
    );
  }
}

export default LadderIndex;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章