react写楼层样式

import React, { useState, useEffect, useRef } from 'react'

//引入后台moke 数据接口
import { get_list } from '../api';

import { Lazyload, Image, Typography } from 'react-vant';
import { Button } from 'react-vant'
function Home() {
    let [list, setlist] = useState([]);
    let box = useRef()
    useEffect(() => {
        (
            async () => {
                var res = await get_list();
                if (res.status === 200) {
                    setlist(res.data)
                }
            }
        )()
    }, [])
    let [i, serI] = useState(Number(localStorage.getItem('i')) || 0)
    // 6. 页面刷新前滚动到第几条刷新后进入页面还是第几条

    // 点击左侧推荐、社会等页面滚动至相对应位置
    // 并在左侧实现相对应的高亮效果还有右侧滚动效果
    const changeIndex = (index) => {

        serI(i);
        let arr = [...box.current.children]

        arr[index].scrollIntoView({ behavior: 'smooth' })
        localStorage.setItem('i', index)
    }
    //  右侧内容滚动时候，左侧对应层高亮

    const Scroll = () => {
        let arr = [...box.current.children]

        arr.forEach((item, index) => {
            if (box.current.scrollTop >= item.offsetTop - 100) {
                serI(index)
            }
        })
    }
    useEffect(() => {
        setTimeout(() => {
            serI(i);
            let arr = [...box.current.children]

            arr[i].scrollIntoView({ behavior: 'smooth' })
        }, 4000)
    }, [])
    return (
        <div className='box'>
            <header>
                <input type="text" /><button>搜索</button>
            </header>
            <main>
              
                    <div className="left">
                        {/* 页面顶部2345头条位置实现吸顶效果 */}
                        <Button type='danger' className='a1'>2345头条</Button>
                        {
                            list && list.map((item, index) => {
                                return <div key={index} onClick={() => changeIndex(index)} className={index === i ? 'bj' : ""}>
                                    <h3>{item.title}</h3>
                                </div>
                            })
                        }
                    </div>
                    <div className="right" ref={box} onScroll={Scroll}>
                        {
                            list && list.map((item, index) => {
                                return <div key={index}>
                                    <h3> {index + 1}、{item.title}</h3>
                                    {
                                        item.childer && item.childer.map((item, index) => {
                                            return <div key={index}>
                                                {/* 图片懒加载 */}
                                                <Image lazyload src={item.img} style={{ width: '100px', height: "100px" }} />
                                                <h4>{item.name}</h4>
                                                <p>{item.date}</p>
                                            </div>
                                        })
                                    }
                                </div>
                            })
                        }
                    </div>
       
            </main>
            <footer>
                
            </footer>
        </div>
    )
}

export default Home