react中refs的作用是什么?有几种用法?

人生乱弹 2年前 (2024) admin
7 0

在 React 中,ref 是用来获取组件或 DOM 元素的引用的一种方式。ref 可以在组件挂载后被访问,并且允许您从组件中访问底层的 DOM 元素或组件实例。
ref 有两种用法:字符串 ref 和回调函数 ref。
字符串 ref(string refs)是一种早期的使用 ref 的方式。它通过设置 ref 属性为一个字符串,将 ref 关联到一个 DOM 元素或组件实例上。然后可以通过 this.refs 获取这个 ref。 class MyComponent extends React.Component {
componentDidMount() {
const input = this.refs.myInput;
input.focus();
}

render() {
return(
<div>
<input type="text" ref="myInput" />
</div>
);
}
}
回调函数 ref(callback refs)是一种现代而常用的使用 ref 的方式。它通过设置 ref 属性为一个回调函数,将 ref 关联到一个 DOM 元素或组件实例上。当组件挂载或卸载时,React 会调用这个回调函数,并将 DOM 元素或组件实例作为参数传递进去。 class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = null;
}

componentDidMount() {
this.inputRef.focus();
}

setInputRef = (ref) => {
this.inputRef = ref;
};

render() {
return (
<div>
<input type="text" ref={this.setInputRef} />
</div>
);
}
}
需要注意的是,字符串 ref 在 React v16.3 之后被废弃了,建议使用回调函数 ref。此外,对于函数组件,可以使用 useRef Hook 来获取组件或 DOM 元素的引用

文章来源

版权声明:admin 发表于 2024年1月22日 pm6:12。
转载请注明:react中refs的作用是什么?有几种用法? | 银库

相关文章

本站主题由 OneNav 一为主题强力驱动