react ref 的使用

ref 的使用

import React, { Component, createRef } from 'react'; import BScroll from "better-scroll" // 引入滚动 移动端用的多 //使用先实例化 ()小括号里加入滚动的对象 new BScroll() // ()小括号保证优先级 把点重复100次 let list = [...(".").repeat(100)] console.log(list) class App extends Component { // 注意ref：在 组件挂载完成之后及更新之后使用 componentDidMount(){ // console.log(this.refs.box) //ref绑定后 refs 有div 获取到dom节点 // new BScroll(this.refs.box) //老版本 new BScroll(this.box.current) //新版本 box不在refs中 直接在this中可以找到 } box = createRef(); //新版创建一个box 多个ref要使用的话 在去创建 render() { return ( <div style={{ width:"200px", height:"300px", border:"1px solid", // 超出隐藏 overflow:"hidden" }} ref = "box" //字符串形式，快要废弃尽量不使用 ref = {this.box} //新版 创建box对象，多个要使用的话 在去创建 > <ul style ={{ margin:0, padding:0, // listStyleL:"none" }} > { list.map((item,index)=>{ return <li key={index}>这是第{index}个数据</li> }) } </ul> </div> ); } } export default App;

ref和声明周期结合的时候 只要不做修改ref，就会存储初始的值(变化前的值) ref不绑定标签 绑定数据绑定txt数据

import React,{useState,useEffect,useRef} from 'react'; function Child(props){ //props 接收父 参数 // console.log(props) // let data = props.data 1不结构 let {data} = props //2解构方法 let [ages, setage] = useState(8) // ref 的使用 let agep = useRef() let [txt, settxt] = useState("文字") //ref和声明周期结合的时候 只要不做修改ref，就会存储初始的值(变化前的值) let txtP = useRef(txt) // 不绑定标签 绑定数据绑定txt数据, // 这里获取的是dom节点 注意要在挂载之后获取 // console.log(agep.current) useEffect(()=>{ console.log(txtP.current,txt) //ref 要绑定数据 不要绑定标签 //这里没有修改之前txtP.current永远获取到初始值，修改后获取到变化前的值 txtP.current = txt },[txt]) let message= `你好啊啊啊啊` return <div> <h1>名称:{data.name}</h1> {/* age不是传递过来的数据 是本地 */} <h3 ref= {agep}>age:{ages}</h3> <button onClick={()=>{ setage(++ages) }}> 涨一岁 </button> <p>{txt}</p> <input type = "text" value= {txt} onChange={({target})=>{ settxt(target.value) }} /> <p dangerouslySetInnerHTML={{ __html:message }} ></p> </div> } export default Child;