反应光滑+反应标签

Posted 2023-02-25

【中文标题】反应光滑+反应标签

【英文标题】：React slick + react tabs

【发布时间】：2020-11-15 11:01:54

【问题描述】：

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

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

< | 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`.

Live Code

【参考方案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>

【讨论】：

感谢您的反馈 Winston Jade Molit。可能这是我的错，因为我没有显示整个代码部分。我已经更新了这个问题。我的父元素是 TabList，但我描述的错误仍然存​​在。

我已经创建了实时版本，当我说它不起作用时，你可以玩弄代码，看看我的意思。 )