React slick + react tabs

Question

请帮我把这两个包组合起来。

我需要标签的滑块，看起来像这样：

< | tab 1 | tab 2 | tab 3 | tab 4 | > 
-------------------------------------
|              Panel                |
-------------------------------------

我做什么？我包装标签我需要滑动：

import Slider from "react-slick";
import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';

const sliderProps = {
dots: false,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
centerMode: true,
variableWidth: true,
infinite: false
};
...
<Tabs>
<TabList>
<Slider {...sliderProps}>

<Tab>1</Tab>

<Tab>2</Tab>

<Tab>3</Tab>

</Slider>
</TabList>
<TabPanel>
Sample content 1
</TabPanel>
<TabPanel>
Sample content 2
</TabPanel>
<TabPanel>
Sample content 3
</TabPanel>
</Tabs>

但当我点击任何选项卡时，第一个选项卡就会变为活动状态，以后的点击就不起作用了。在colsole中我得到错误：Warning: Failed prop type: Invalid prop `tabIndex` of type `number` supplied to `Tab`, expected `string`.

实时代码

Answer 1

如果在Slider组件内部使用react-tabs库，则需要Tab组件的父组件。像这样：

import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
import 'react-tabs/style/react-tabs.css';
<Tabs>
<TabList>
<Tab>1</Tab>
<Tab>2</Tab>
<Tab>3</Tab>
</TabList>
<TabPanel>
Sample content 1
</TabPanel>
<TabPanel>
Sample content 2
</TabPanel>
<TabPanel>
Sample content 3
</TabPanel>
</Tabs>