在 React 中,ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。在组件中存储对 DOM 节点或组件实例的引用,直接访问和操作
1:字符串形式的 ref:在早期版本的 React 中,可以使用字符串来创建 ref。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = React.createRef();
}
componentDidMount() {
this.inputRef.current.focus();
}
render() {
return <input ref={this.inputRef} />;
}
}
2:回调形式的 ref:在现代版本的 React 中,推荐使用回调函数来创建 ref。回调函数会在组件挂载或卸载时被调用,并接收对组件实例或 DOM 元素的引用作为参数。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.inputRef = null;
}
componentDidMount() {
this.inputRef.focus();
}
setInputRef = (ref) => {
this.inputRef = ref;
};
render() {
return <input ref={this.setInputRef} />;
}
}
使用 ref 可以实现以下功能:
尽量避免在组件内部过度使用 ref,因为会破坏 React 的声明性和组件化特性,可能导致代码可读性和可维护性的下降。只有在必要时,才使用 ref 来进行特定的 DOM 操作或与第三方库集成。
在 React 中,可以使用 ref 属性来创建和使用 ref。 下面是使用 ref 的一般步骤:
1:创建 ref:
在类组件中,用 React.createRef() 创建 ref 对象,将其赋值给组件的实例属性。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
// ...
}
在函数组件中,用 React.useRef() 创建 ref 对象,并赋值给一个变量。
function MyComponent() {
const myRef = React.useRef();
// ...
}
2:将 ref 绑定到组件或 DOM 元素:
对于 DOM 元素,将 ref 直接赋值给 ref 属性。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
console.log(this.myRef.current); // 访问 DOM 元素
}
render() {
return <input ref={this.myRef} />;
}
}
对于类组件,将 ref 绑定到类组件的实例。
class ChildComponent extends React.Component {
doSomething() {
// ...
}
}
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
componentDidMount() {
this.childRef.current.doSomething(); // 调用子组件方法
}
render() {
return <ChildComponent ref={this.childRef} />;
}
}
3:访问 ref:
对于 DOM 元素,可以使用 ref.current 来访问 DOM 元素。
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
componentDidMount() {
this.myRef.current.focus(); // 聚焦到输入框
}
render() {
return <input ref={this.myRef} />;
}
}
对于类组件,可以通过 ref.current 访问类组件的实例。
class ChildComponent extends React.Component {
doSomething() {
// ...
}
}
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.childRef = React.createRef();
}
componentDidMount() {
this.childRef.current.doSomething(); // 调用子组件方法
}
render() {
return <ChildComponent ref={this.childRef} />;
}
}
访问 ref 的时机是在组件挂载完成后。在 componentDidMount 或后续的生命周期方法中访问 ref,ref 的值不为 null 或 undefined。
如果要在函数组件中使用 ref,可以使用 React.forwardRef 来将 ref 传递给子组件,在子组件中访问 ref。