React-"Refs and the DOM"

原创 2016年11月29日 12:16:32

React-“Refs and the DOM”

学习是一件反反复复的事情,今天回顾react官方文档中Refs and the DOM,大致翻译一遍,将笔记摘录备忘。

React的典型数据流中,props是父组件和子组件交互的唯一方式。要修改子组件,你需要使用新的porps重新render它。然而有的时候我们又需要在典型数据流之外去修改一个子组件。被修改的子组件可能是一个React组件实例或者是一个DOM元素,不论哪种情况,React都为我们提供了一种解决方法。

The ref Callback Attribute

React中有一种特殊的属性(–ref),你可以将他运用到任何的组件中。ref属性接收一个回调函数,该函数会在组件mount或者unmount之后立即被调用。

当ref属性被用在一个HTML元素上时,该ref属性的回调函数会接收其下DOM元素作为该函数的参数。例如,下面的代码使用ref回调函数来存储一个DOM节点的引用:

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

  focus() {
    //使用原生DOM API明确地使文字输入框获取焦点
    this.textInput.focus();
  }

  render() {
    //使用`ref`回掉函数将text input DOM元素的引用
    //存放在this.textInput中
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focus}
        />
      </div>
    );
  }
}

React会在组件加载的时候将DOM元素作为参数来调用ref回调函数,在组件卸载的时候将null作为参数调用ref回调函数。

使用ref回调函数在类中设置属性是获取DOM元素的常见模式。如果你通常使用this.refs.myRefName来获取对元素引用,我们更推荐你使用上面的方法来代替。

当ref属性应用在自定义组件中时,ref回调函数接收已加载组件的实例作为它的参数。例如,如果我们希望将上面的CustomTextInput包装起来并模拟在它加载后立即被点击的效果:

class AutoFocusTextInput extends React.Component {
  componentDidMount() {
    this.textInput.focus();
  }

  render() {
    return (
      <CustomTextInput
        ref={(input) => { this.textInput = input; }} />
    );
  }
}

你不能在函数组件(functional components)中使用ref属性,因为它们没有实例。然而你可以在函数组件的render方法中使用ref属性:

function CustomTextInput(props) {
  //textInput需要在此声明
  //来确保ref回调函数可以引用它
  let textInput = null;

  function handleClick() {
    textInput.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={(input) => { textInput = input; }} />
      <input
        type="button"
        value="Focus the text input"
        onClick={handleClick}
      />
    </div>
  );  
}

不要过度使用Refs

在你的应用中使用refs的最初考虑可能只是让它正常跑起来(“make things happen”)。如果是这种情况,花点时间批判性地思考一下在组件层次结构中哪里拥有state更加合适。通常,你会发现组件层次中的更高层是拥有该state的合适位置。文章Lifting State Up讲述了一个相关例子。

欢迎关注我的小站wyuhao.com

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/a153375250/article/details/53391265

React--引用(refs and the DOM)

Refs and the DOM在标准的React数据流中,props是在父组件和其子组件中唯一的交流手段。为了修改一个子,你需要通过新的props重新渲染。然而,在很小一部分情况下,需要强制修改标准...
  • cithegod
  • cithegod
  • 2016-11-03 15:54:45
  • 1564

react中操作dom的方法之---refs

自学react也那么久了,因为是自学嘛,当然很多坑,特别是react中如何操控DOM这一方面,就很头大,因为react生成的是虚拟的DOM,是无法直接操作的,在网上也查找了很多这方面的知识,但就是没能...
  • qq_26943485
  • qq_26943485
  • 2017-02-23 17:29:23
  • 1203

React-"Refs and the DOM"

React-“Refs and the DOM” 学习是一件反反复复的事情,今天回顾react官方文档中Refs and the DOM,大致翻译一遍,将笔记摘录备忘。 React的典型数据流中,...
  • a153375250
  • a153375250
  • 2016-11-29 12:16:32
  • 550

React中的refs的使用

ref是React中的一种属性,当render函数返回某个组件的实例时,可以给render中的某个虚拟DOM节点添加一个ref属性,如下面的代码所示: [html] view plain ...
  • m0_38073829
  • m0_38073829
  • 2017-07-08 09:42:27
  • 263

Refs and the DOM

Refs and the DOM 通常情况下props是组件与组件之间通信的唯一方式,然而有时候会遇到需要在数据流之外紧急修改一些child(React component也可能是DOM),...
  • u010977147
  • u010977147
  • 2017-09-14 15:28:25
  • 112

react绑定事件

绑定事件 React事件名区别于DOM事件,以驼峰命名法JSX以函数的方式传递时间,而不是字符串 //HTML: button onclick="activateLasers()"> ...
  • u010977147
  • u010977147
  • 2017-09-13 15:40:27
  • 374

React 不使用ES6

React Without ES6 ES6语法创建组件 class Greeting extends React.Component { render() { return h...
  • u010977147
  • u010977147
  • 2017-09-15 10:05:57
  • 298

Vue $refs的基本用法

原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html div id="app"> input type="text" ref=...
  • tanga842428
  • tanga842428
  • 2017-06-18 18:06:59
  • 12386

React学习之高级ReactDOM(二十四)

1.概述react-dom中的顶级APIrender() unmountComponentAtNode() findDOMNode() 浏览器支持情况 React支持所有流行的浏览器,包括IE9+...
  • qq_18661257
  • qq_18661257
  • 2017-03-24 10:18:14
  • 1080

vue基本使用--refs获取组件或元素

说明:vm.$refs 一个对象,持有已注册过 ref 的所有子组件(或HTML元素) 使用:在 HTML元素 中,添加ref属性,然后在JS中通过vm.$refs.属性来获取 注意:如果获取的是一个...
  • qq_21796899
  • qq_21796899
  • 2017-12-08 16:09:28
  • 835
收藏助手
不良信息举报
您举报文章:React-"Refs and the DOM"
举报原因:
原因补充:

(最多只允许输入30个字)