react tabs 初体验

  |   评论   |   浏览

背景

使用 react 来做一个导航。

官方给出了效果示例

初体验

安装

$ npm install --save rc-tabs

结果

+ rc-tabs@9.5.2 added 12 packages from 13 contributors in 12.014s

编写 js 代码

import Tabs, { TabPane } from 'rc-tabs'; import TabContent from 'rc-tabs/lib/TabContent'; import ScrollableInkTabBar from 'rc-tabs/lib/ScrollableInkTabBar'; var callback = function(key){ } ReactDOM.render( ( <Tabs defaultActiveKey="2" onChange={callback} renderTabBar={()=><ScrollableInkTabBar />} renderTabContent={()=><TabContent />} > <TabPane tab='tab 1' key="1">first</TabPane> <TabPane tab='tab 2' key="2">second</TabPane> <TabPane tab='tab 3' key="3">third</TabPane> </Tabs> ), document.getElementById('t2'));

准备 CSS 文件

activeKey 中的 index.css 文件拿起来,放在 src 目录下 tab.css中,

再在 js 文件中引入 CSS 文件,如下:

import Styles from './tab.css';

参考