React 中refs的使用方法和步骤
在 React 中，ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。在组件中存储对 DOM 节点或组件实例的引用，直接访问和操作
ref 的使用方式有两种：
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 可以实现以下功能：
- 获取 DOM 元素的引用，以便直接操作它们（例如，聚焦、滚动等）。
- 获取子组件的引用，以便与子组件进行通信和调用子组件的方法。
- 在函数组件中使用 forwardRef 来将 ref 传递给子组件。
尽量避免在组件内部过度使用 ref，因为会破坏 React 的声明性和组件化特性，可能导致代码可读性和可维护性的下降。只有在必要时，才使用 ref 来进行特定的 DOM 操作或与第三方库集成。
使用 ref 的一般步骤
在 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。
腾讯云开发者
