reactjs - 反应光滑+反应标签

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

如果您使用react-tabs库，则在Slider组件内部，您需要该组件的父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>