React（15）ref

蔚落 2022-05-31 08:09 187阅读 0赞

### 23、ref ###

用过 Vue 的同学，在使用 React 的 ref 时，注意不要混淆。

在 Vue 中，ref 绑定的 DOM 元素，可以直接在组件实例里，通过 `this.$refs.xxx` 来获取。

但是在 React 中，ref 的属性的值，是一个函数；

函数的参数是当前 DOM 标签，或是组件实例；

于是你可以在函数体内，通过 `this.xxx = xxxx` 来将该 DOM 赋值给组件的某个变量。

这样就实现了类似 Vue 的 refs 的功能。

给一个示例：

class RefsDemo extends React.Component { 
        constructor() {
            super()
            this.state = {
                display: ''
            }
        }
    
        render() {
            return <div>
                <div type="text" ref={(input) => {
                    this.textInput = input
                }}></div>
            </div>
        }
    
        componentDidMount() {
            console.log(this.textInput)
        }
    }

输出结果：

--------------------

当然也可以用来获取子组件：

class ChildDemo extends React.Component { 
        render() {
            return <p>123</p>
        }
    }
    
    class RefsDemo extends React.Component { 
        constructor() {
            super()
            this.state = {
                display: ''
            }
        }
    
        render() {
            return <div>
                <ChildDemo ref={(child) => {
                    this.child = child
                }}/>
            </div>
        }
    
        componentDidMount() {
            console.log(this.child)
        }
    }

输出：

ChildDemo { props: {…}, context: { …}, refs: { …}, updater: { …}, _reactInternalFiber: FiberNode, …}

--------------------

**父组件获取子组件的 DOM：**

首先，我们知道， **不能** 直接通过父元素传 props 属性，然后将该 DOM 赋值给这个属性；

所以我们可以用常规的方法：即父组件传一个赋值函数给子组件，然后子组件在 ref 中调用这个函数即可。

示例：

如果熟悉 React 的基本功，那么写出以上代码是毫无难度的。

但是，getInput 这个方法其实并没有必要独立出来，因为他的逻辑很简单，所以完全可以直接将这个函数作为 props 直接传入子组件，这也就有了 React 的教程上的示例。

class ChildDemo extends React.Component { 
        render() {
            return <div>
                <input type="text" ref={
       this.props.getInput}/>
            </div>
        }
    }
    
    class RefsDemo extends React.Component { 
        render() {
            return <div>
                {
       /* 因为函数简单，所以直接写到这里，箭头函数自带绑定this到声明时的作用域 */}
                <ChildDemo getInput={DOM => {
                    console.log(DOM)
                    this.myInput = DOM
                }}/>
            </div>
        }
    
        // 注释掉
        // getInput(DOM) { 
        // console.log(DOM)
        // this.myInput = DOM
        // }
    }