react ref(父组件访问子组件, 除了props)

## **何时使用 Refs** 
下面是几个适合使用 refs 的情况:

- 处理焦点、文本选择或媒体控制。 - 触发强制动画。 
- 集成第三方 DOM 库 
如果可以通过声明式实现，则尽量避免使用 refs。
例如，不要在 Dialog 组件上直接暴露 open() 和 close() 方法，最好传递 isOpen 属性。

****

## **不要过度使用 Refs** 
你可能首先会想到在你的应用程序中使用 refs 来更新组件。如果是这种情况，请花一点时间，重新思考一下 state 属性在组件层中位置。通常你会想明白，提升 state 所在的组件层级会是更合适的做法。有关示例，请参考**状态提升**(`在React中，状态分享是通过将state数据提升至离需要这些数据的组件最近的父组件来完成的。这就是所谓的状态提升`).

## **使用refs** ### 1.React.createRef() (版本要求: React v16.3, 只能用在DOM 元素或者 class 组件) 
```
class MyComponent extends React.Component { 
    constructor(props) { 
        super(props); 
        this.myRef = React.createRef(); 
    } 
    render() { 
        return <div ref={this.myRef} />; 
    } 
} 
```
### 2.回调 Refs(旧版this.refs.xxx 替换成回调Refs) 
```
class MyComponent extends React.Component { 
    constructor(props) { 
        super(props); 
    } 
    componentDidUpdate() { 
        console.log(this.child.state.msg) // "hello world" 
    } 
    render() { 
        return( 
            <div> 
                 
                <input ref={(ele)=> this.textInput = ele}/> 
                 
                <children onRef={ref =>this.myRef = ref} /> 
            </div> 
        ) 
    } 
} 
class Children extends React.Component { constructor(props) { 
        super(props); 
        this.state = { 
            msg: "hello world" 
        } 
    } 
    componentDidMount() {   
        this.props.onRef(this)  
    } 
    render() { 
        return <div>11111111</div> 
    } 
} 
```

Leanote's Blog

Navigation

Recent Posts

Friend Links