码迷,mamicode.com
首页 > 其他好文 > 详细

React ref

时间:2017-12-28 01:21:37      阅读:264      评论:0      收藏:0      [点我收藏+]

标签:div   log   one   component   efs   xtend   function   null   body   

React 组件在 加载时将 DOM 元素传入 ref 的回调函数,在卸载时则会传入 null。ref 回调会在componentDidMount 或 componentDidUpdate 这些生命周期回调之前执行。
当 ref 属性用于使用 class 声明的自定义组件时,ref 的回调接收的是已经加载的 React 实例

Refs 与函数式组件

你不能在函数式组件上使用 ref 属性,因为它们没有实例
ps: 可以在函数式组件内部使用 ref,只要它指向一个 DOM 元素或者 class 组件

对父组件暴露 DOM 节点

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}

React ref

标签:div   log   one   component   efs   xtend   function   null   body   

原文地址:https://www.cnblogs.com/changlon/p/8128311.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!