React-ref使用

ref

• 旧版 - string ref
• 主流 - createRef()
• 注意：在 组件挂载完成之后及更新之后使用

什么是 better-scroll

• better-scroll 是一个移动端滚动的解决方案，它是基于 iscroll 的重写，它和 iscroll 的主要区别在这里。better-scroll 也很强大，不仅可以做普通的滚动列表，还可以做轮播图、picker 等等。

安装better-scroll

npm i better-scroll

引用

import BScroll from “better-scroll”;

代码演示

import React, {
    
     createRef, PureComponent, } from 'react';
import BScroll from "better-scroll";
/*
   new BScroll()
*/

let list = [...(".".repeat(100))];
console.log(list)
class App extends PureComponent {
    
    

    box = createRef();
    componentDidMount() {
    
    
        console.log(this.box.current);
        // new BScroll(this.refs.box); //滚轮


        new BScroll(this.box.current) //滚轮
    }

    render() {
    
    

        return ( <
            div style = {
    
    
                {
    
    
                    height: "300px",
                    border: "1px solid #000",
                    overflow: "hidden"
                }
            }
            //ref = "box" 
            ref = {
    
     this.box } >
            <
            ul style = {
    
    
                {
    
    
                    margin: 0,
                    padding: 0,
                    listStyle: "none"
                }
            } > {
    
    
                list.map((item, index) => {
    
    
                    return <li key = {
    
     index } > 这是第 {
    
     index }
                    个li < /li>
                })
            } <
            /ul> < /
            div >
        )
    }
}

export default App;