• 解决 react typescript 中 antD 走马灯 this.slider 报错


    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
    

      

  • 相关阅读:
    linux命令练习
    Centos修改用户密码
    Git使用
    使用SecureCRT连接虚拟机中Linux系统 和 虚拟机网络配置
    CentOS里Tomcat端口开放
    Linux下安装Tomcat
    laravel 中将DB::select 得到的内容转为数组
    nginx 转发 由于php语法错误 导致的 50x
    windows 下后台启动 redis
    sublime 非常好用的注释工具
  • 原文地址:https://www.cnblogs.com/whlBooK/p/11119913.html
Copyright © 2020-2023  润新知