How to use the antd.Tabs.TabPane function in antd

// 收费管理 - 应收租金
import React, {Component} from 'react'
import { Tabs  } from 'antd'
import CollectRenting from './CollectRenting'
import CollectRentConduct from './CollectRentConduct'
import CollectRentFail from './CollectRentFail'
import CollectRentSuccess from './CollectRentSuccess'
// 引入组件
const TabPane = Tabs.TabPane
// React component
class ReceivableRent extends Component {
    constructor (props) {
        super(props)
        this.state = {
        }
    }
    callback = (key) => {
        console.log(key)
    }
    render () {
        console.log(1111)
        return ( this.callback}>

import React, { Component } from 'react';
import { Tabs } from 'antd';
import Header from '../../../../component/header/header';
import { TabProps } from '../../../../typings/type';
import './index.css';

import MobXApp from '../mobx';


const TabPane = Tabs.TabPane;
const tabItemClick = (key) => {
  console.log('tab click', key);
};
// https://github.com/gaearon/react-hot-loader/issues/525
// must export, not export default
export class Tab extends Component {
  render() {
    return <div>
      <header></header>
      <div>
        <h1>{this.props.message.text}</h1>
        
          
          Content of Tab Pane 2
          Content of Tab Pane 3
        </div></div>

DatePicker,  // 日期选择
  TimePicker,  // 时间选择
  Upload,      // 上传
  /* 动画 */
  QueueAnim,
} from 'antd';

// import { getStatusClasses, getStatusHelp } from 'common/utils';
// import * as _ from 'lodash';


/* antd.Common */
export const ButtonClass = React.createFactory(Button);
export const IconClass = React.createFactory(Icon);
export const TabsClass = React.createFactory(Tabs);
export const TabPaneClass = React.createFactory(Tabs.TabPane);


/* antd.Form */
export const FormClass = React.createFactory(Form);
export const FormItemClass = React.createFactory(Form.Item);

export const InputClass = React.createFactory(Input);

export const InputNumberClass = React.createFactory(InputNumber);

export const CheckboxClass = React.createFactory(Checkbox);

export const RadioClass = React.createFactory(Radio);
export const RadioButtonClass = React.createFactory(Radio.Button);
export const RadioGroupClass = React.createFactory(Radio.Group);

import React, { Component } from 'react';
import Header from 'component/header/header.jsx';
import { Tabs } from 'antd';
import './tab.css';
const TabPane = Tabs.TabPane;

const tabItemClick = (key) =>{
  console.log('tab click',key);
};

export default class Module extends Component {
  render() {
    return <div>
      <header></header>
      <div>
        <div>{this.props.message.text}</div>
        
          Content of Tab Pane 1
          Content of Tab Pane 2
          Content of Tab Pane 3
        </div></div>

import * as React from 'react';
import { Tabs } from 'antd';
import Create from './components/create/index';
import List from './components/list';
import Info from './components/info';
import "./style.less"
const TabPane = Tabs.TabPane;
export default class IApp extends React.Component {
    public render() {
        return (
            <div>
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            </div>

import React from "react";
import {connect} from "react-redux";
import {Layout, Tabs} from "antd";
import Logs from "../Logs";
import "./logs.scss";


const TabPane = Tabs.TabPane;

//日志多标签展示页
class Multi extends React.Component {
    constructor(props) {
        super(props);
        this.newTabIndex = 0;
        this.state = {
            activeKey: '1',
            panes: [{key:'1',title:"选择日志",closable: false}],
        };
    }

    onChange = (activeKey) => {
        this.setState({activeKey});
    };
    onEdit = (targetKey, action) => {

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Form, Input, Button, Select, Tabs } from 'antd';
import { request } from '../common';
import marked3 from 'marked3';
import hljs from 'highlight.js';
import '../rainbow.css';
import './AdminPostEditor.css';
const FormItem = Form.Item;
const { TextArea } = Input;
const TabPane = Tabs.TabPane;
const Option = Select.Option;

class AdminPostEditor extends Component {
    constructor(props) {
        super(props);
        this.state = {
            post: props.post,
            tags: [],
        };
        this.onContentChange = this.onContentChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    fetchTags() {
        request(`/api/v1/tags`, {
            method: 'GET',

import { Tabs, List, Icon, Button, Tag } from 'antd';
import {
  getRankElement,
  getCluster,
  ClusterRspData,
  ClusterType,
  RankElementRspData,
} from '@/services/rank';

import styles from './index.less';
import Content from '@/common/Content';
import { Link } from 'react-router-dom';
import AlbumCard from '@/common/AlbumCard';
import PayTag from '@/components/PayTag';

const TabPane = Tabs.TabPane;

interface RankContentProps {
  rankListData: RankElementRspData;
  onTabChange: (codeState: { typeCode: string; clusterCode: string }) => void;
}

interface NavTabsProps {
  tabs: ClusterType[];
  active: string;
  activeSub: string;
  onTabClick: (tab: string) => void;
  onSubTabClick: (tab: string) => void;
}

const AlbumItem = ({ info }) => {
  const {

import React,{ Component } from 'react'
import { Tabs } from 'antd'
import { View } from '@/components/flexView'

import FollowTable from './follow'
import BlackList from './blackList'

const TabPane = Tabs.TabPane
export default class UserManagement extends Component {
    render() {
        const tabList = [
            {
                key:1,
                tab:'已关注',
                main:() => 
            }, {
                key:2,
                tab:'黑名单',
                main:() => 
            }
        ]
        return (
            
                {

import * as React from 'react'
import { compose } from 'redux'
import { connect } from 'react-redux'
import { Icon, Tabs, Breadcrumb } from 'antd'
const TabPane = Tabs.TabPane
import { Link } from 'react-router'
import Box from '../../components/Box'
import { InjectedRouter } from 'react-router/lib/Router'
import MemberList from './component/MemberList'
import ProjectList from './component/ProjectList'
import Setting from './component/Setting'
import TeamList from './component/TeamList'
const styles = require('./Team.less')
const utilStyles = require('../../assets/less/util.less')
import Avatar from '../../components/Avatar'

import {
  loadTeamProjects, loadTeamMembers, loadTeamTeams, loadTeamDetail, pullProjectInTeam, updateTeamProjectPermission, deleteTeamProject, deleteTeamMember, changeTeamMemberRole,
  editTeam, deleteTeam, loadTeams, pullMemberInTeam
} from './actions'
import { createStructuredSelector } from 'reselect'