标签：index typescript .. slider 报错 key import 天气预报

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

标签：index,typescript,..,slider,报错,key,import,天气预报
来源： https://www.cnblogs.com/whlBooK/p/11119913.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。