pengdongliang 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu

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> 
                <!--ref回调--> 
                <input ref={(ele)=> this.textInput = ele}/> 
                <!--props回调--> 
                <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> 
    } 
} 

标题:react ref(父组件访问子组件, 除了props)
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/04/1573740598696.html