今天发现了一个,在 无状态函数式组件 中很精妙的 ref 引用方法
其中用到了 React.useState
const useState = React.useState
// 结合 useState 的用法
const Name1 = () => {
const [refName, setRefName] = useState(null);
const click1 = str => {
console.log(refName)
}
return (
<>
<div ref={setRefName}>
目标节点
</div>
<div onClick={click1}>click1</div>
</>
);
};
const Name2 = () => {
let refName;
const click1 = str => {
console.log(refName)
}
return (
<>
<div ref={i => refName = i}>
目标节点
</div>
<div onClick={click1}>click1</div>
</>
);
};
我的理解:
setRefName(value) 是修改 refName 的方法, 作用就是 refName = value
在 ref 中使用, 相当于 setRefName(this), 也就是 refName = this
注:useState 的一般用
const [swq, setSwq] = useState('初始值');
console.log(swq) // 调用
setSwq("new swq") // 赋新值
// 赋值要在下一个周期才生效
end