react 楼层

最新推荐文章于 2023-07-26 20:29:53 发布

zxy_aabbcc

最新推荐文章于 2023-07-26 20:29:53 发布

阅读量2.1k

点赞数

分类专栏： javascript react 文章标签： react

本文链接：https://blog.youkuaiyun.com/weixin_38987500/article/details/106994028

版权

javascript 同时被 2 个专栏收录

10 篇文章

订阅专栏

react

2 篇文章

订阅专栏

本人第一个读完react 文档决定写一个小demo 楼层效果
这段demo故意把整个组件拆分成几个小组件目的是为了训练自己对react组件的理解程度和组件之间传参能力不建议各位拿来放在项目里

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="app"></div>

</div>

<script src="react.development.js"></script>
<script src="react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<!-- 加载我们的 React 组件。-->
<script src="index.js" type="text/babel"></script>

</body>
</html>

css 代码

.menuList{
    margin-bottom:20px;
    position: fixed;
    top:0;
    left:0
}

.menuList>span{
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-right:10px;
    cursor: pointer;


}
.menuList>span.active{
    color:red;
}

.container{
    min-height: 200px;
}
.container>.building{
    height:100vh
}

.container>div{
    background: aquamarine;
}

js代码

var btl;
class Area extends React.Component {
    constructor(props) {
        super(props);
        this.state={len:'',buildingIndex: "",buildingTopList:""}

    }
    componentDidMount(){

    }
    getLen = (len) => {
        this.setState({len})
    };
    getIndex =(index)=>{
        this.setState({buildingIndex:index})
    };
    buildingTopList=(buildingTopList)=>{
        this.setState({buildingTopList})
        console.log(this.state.buildingTopList)
    }
    render() {

        // this.setState({buildingTopList: this.props.buildingTopList})
        console.log(this.state.buildingTopList)
        var building = document.getElementsByClassName("building")
        for(var i=0;i<building.length;i++){
            console.log(building[i].scrollTop)
        }
        return (
            <div>
                <MenuList getLen={this.getLen} getIndex = {this.getIndex} btl={this.state.buildingTopList}></MenuList>
                <Container Len={this.state.len} buildingIndex={this.state.buildingIndex} buildingTopList={this.buildingTopList} />
            </div>
        )
    }
}

class Container extends  React.Component{
    constructor(props) {
        super(props);
        this.state = {buildingScrollTop:[],buildingIndex:props.buildingIndex}

    }
    componentDidMount(){
        setTimeout(()=>{
            var building = document.getElementsByClassName("building")
            console.log(building.length)
            var buildingScrollTop=[]
            for(var i=0;i<building.length;i++){
                buildingScrollTop.push(building[i].offsetTop)
            }
            this.setState({buildingScrollTop})
            this.props.buildingTopList(this.state.buildingScrollTop);

        },100)

    }
    render() {
        window.scrollTo({
            behavior:"smooth",
            top:this.state.buildingScrollTop[this.props.buildingIndex]
        })
        var num = this.props.Len
        console.log(num)
        var a= []
        for(var i=0;i<num;i++){
            a.push(<div className={'building'} key={i.toString()}>楼层{i}</div>)
        }


        return (
            <div>
                <div className={'container'}>{a}</div>
            </div>)
    }
}

class MenuList extends React.Component {
    constructor(props) {
        super(props);
        this.spanClick==this.spanClick.bind(this)
        this.windowScroll = this.windowScroll.bind(this)
        this.state = {
            list: [{name:"楼层0"},{name:"楼层1"},{name:"楼层2"},{name:"楼层3"}],
            activeSpan:0,
            btl:this.props.btl,
            addL:false
        }
        btl= this.props.btl
    }
    componentDidMount(){
        console.log("mount")
        this.props.getLen(this.state.list.length);
    }
    componentWillUnmount(){

    }
    windowScroll(){
        this.setState({addL: true})

        var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            var btl = this.props.btl
            btl.map((item,index)=>{
                if(scrollTop>=item){
                    this.setState({activeSpan:index})
                }
            })


    }
    spanClick(index){
        this.setState({activeSpan: index})
        this.props.getIndex(index)
    }

    render() {

        if(this.props.btl&&this.state.addL===false){
            window.addEventListener("scroll",this.windowScroll)
        }

        var list = this.state.list
        var menu = list.map((item,index) => <span onClick={this.spanClick.bind(this,index)} className={this.state.activeSpan===index?"active":null} key={index.toString()}>{item.name}</span>)
        return (
            <div className={"menuList"}>
                {menu}
            </div>
        )
    }
}

ReactDOM.render(
    <Area/>,
    document.getElementById("app")
)

新手练习单纯练手勿喷