Refs

在React中我们的数据流是从上至下，通过传递给子组件props来重新渲染它

但是，有时候我们需要获取某些组件或者DOM元素，强制修改,这时我们可以使用Refs

我们应该使用声明式实现，避免使用refs，尽量只在一下几种情况下使用:

• 处理焦点、文本选择或媒体控制
• 触发强制动画
• 集成第三方 DOM 库

添加Ref

import React from "react"

class CustomTextInput extends React.Component {

    constructor(props) {
        super(props)
        this.focus = this.focus.bind(this)
    }

    focus() {
        this.textInput.focus()
    }

    render() {
        return(
            <div>
                //通过ref设置textInput 为此DOM元素
                <input type="text" ref={input => this.textInput = input} ></input>
                <input type="button" value="获得焦点" onClick={this.focus} ></input>
            </div>
        )
    }

}

export default  CustomTextInput

ref={input => this.textInput = input} ref属性 会在DOM元素加载时将此元素传入ref,卸载时传入null

这种声明方式只对DOM元素和用class声明的组件有效
在函数式组件上，因为没有实例，所以不能使用ref属性

对父组件暴露DOM节点

当我们想要向从父组件访问子组件节点时,我们可以将传递给子组件一个特殊的函数属性,然后将这个函数属性作为ref属性传入子节点，可以通过这个函数将子节点赋值给父节点的属性

class CustomTextInput extends React.Component {
    render() {
        return(
            <div>
                <input type="text" ref={this.props.inputRef} ></input>
            </div>
        )
    }

}

class ParentCompnent extends React.Component {
    constructor(props) {
        super(props)
        this.focus = this.focus.bind(this)
    }

    focus() {
        this.textInput.focus()
    }
    render() {
        return(
            <div>
                <input type="button" value="获得焦点" onClick={this.focus} ></input>
                <CustomTextInput inputRef={refCom => this.textInput = refCom}></CustomTextInput>
            </div>
        )
    }
}

export default  ParentCompnent

<CustomTextInput inputRef={refCom => this.textInput = refCom}></CustomTextInput>设置子组件的ref属性回调此函数，将子组件设置为父组件的this.textInput属性

如果有更深的层级结构 我们只需要一级一级传递即可