• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

解决reacttypescript中antD走马灯this.slider报错

原作者: [db:作者] 来自: [db:来源] 收藏 邀请
import * as React from 'react'
import { Layout, Menu, Carousel } from 'antd'
import './index.less'

import tu1 from '../../assets/images/waterInfor/img/tu1.jpg'
import tu2 from '../../assets/images/waterInfor/img/tu2.jpg'
import tu3 from '../../assets/images/waterInfor/img/tu3.jpg'

const { Sider, Content } = Layout;
interface IProps {
    
 }

interface IState {
    index?: any
    
}

class WaterInfoDetailPage extends React.Component<IProps, IState>{
    slider:any = undefined;  //解决slider报错
	constructor(props) {
        super(props)
        this.state = {
            index: 1
        }

    }
     // 点击右侧菜单栏触发的事件
    onOpenChange = ({ key }) => { 
      //  console.log(this.slider)
       // this.slider.slickGoTo(key)
        //this.slide:any = undefined;
       this.slider && this.slider.innerSlider.slickGoTo(key)
        this.setState ({
            index: key
        })
    }
    // onChange = ((a, b, c) => {
    //     console.log(a, b, c);
    // }
    render() {
        const settings = {
            dots: false,
         
          };
        return (
            <div className="water-detail-content">
               <Layout>
                    <Content className="Carousel-content"> 
                        <Carousel ref={slider => this.slider = slider} {...settings}>
                            <div key={1}>
                                <img src={tu1} />
                            </div>
                            <div key={2}>
                                <img src={tu1} />
                            </div>
                            <div key={3}>
                                <img src={tu2} />
                            </div>
                            <div key={4}>
                              <img src={tu3} />
                            </div>
                        </Carousel>
                    </Content>
                    <Sider style={{background:'#fff'}}>
                        
                        <Menu mode="inline" 
                            defaultSelectedKeys = {['1']}
                            onSelect={this.onOpenChange}>
                             <Menu.Item key="1">
                                {/* <span className="falg"></span> */}
                                <span className={`${1 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>水情</span>
                            </Menu.Item>
                            <Menu.Item key="2">
                                <span className={`${2 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>雨情</span>
                            </Menu.Item>
                            <Menu.Item key="3">
                                <span className={`${3 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="4">
                                <span className={`${4 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="5">
                                <span className={`${5 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="6">
                                <span className={`${6 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="7">
                                <span className={`${7 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="8">
                                <span className={`${8 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="9">
                                <span className={`${9 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="10">
                                <span className={`${10 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                            <Menu.Item key="11">
                                <span className={`${11 == this.state.index ? 'active' : 'flag'}`}></span>
                                <span>天气预报</span>
                            </Menu.Item>
                        </Menu>
                    </Sider>
                   
               </Layout>
            </div>
        )
    
    }
}
export default WaterInfoDetailPage

  

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap