antd-mobile Tabs 标签页疑问

问题描述

问 题

browser / google chrome / antd-mobile: 1.0.1

引用Tabs组件

code:

import { Tabs, WhiteSpace } from 'antd-mobile';

const TabPane = Tabs.TabPane;

function callback(key) {
  console.log(key);
}

const TabExample = () => (
  <div>
    <Tabs defaultActiveKey="1" onChange={callback}>
      <TabPane tab="选项卡一" key="1">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡一内容
        </div>
      </TabPane>
      <TabPane tab="选项卡二" key="2">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡二内容
        </div>
      </TabPane>
      <TabPane tab="选项卡三" key="3">
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '5rem', backgroundColor: '#fff' }}>
          选项卡三内容
        </div>
      </TabPane>
    </Tabs>
    <WhiteSpace />
  </div>
);

ReactDOM.render(<TabExample />, mountNode);

提示错误:

Warning: Failed prop type: Invalid prop `className` of type `object` supplied to `Tabs`, expected `string`.    

解决方案

sorry，这是bug
ps 提问前建议先去issue搜索
https://github.com/ant-design...

这篇关于antd-mobile Tabs 标签页疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！