React ref

Posted joe_ice

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React ref相关的知识,希望对你有一定的参考价值。

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的主要内容,如果未能解决你的问题,请参考以下文章

Vue 的 ref 和 React 的 refs 转发

Vue 的 ref 和 React 的 refs 转发

react ref的使用

React 中使用 Refs 改变样式是否很糟糕?

如果我不拥有该代码,如何将 Ref 分配给 React 组件中的按钮?我想集中注意力

7React中的refs的使用