多语言展示
当前在线：576今日阅读：168今日分享：49

Refs to components
这次学习用到了refs，遇到了点问题，所以去看了一下官方文档，本文是跟据官方文档中介绍的refs总结其中的用法。其实一句React的实现原理，组件的状态变化都是依据数据流的流动而改变的，从原则上讲获取组件实例的状况是不应该出现的，但是情况也不是绝对的，有的时候还是有这样的需求的。
方法/步骤
1

1.The Ref returned from ReactDOM.render从ReactDOM.render方法返回的ref我们都知道，当我们的组件结构全部搭建完成，渲染我们的顶级组件时用的就是这个方法，但可能大家不知道的是，这个方法返回的就是我们顶级组件的组件实例对象。var myComponent = ReactDOM.render(, myContainer);这里，我们获取的myComponent就是组件实例。注意，这个方法只是在顶级组件中有效。

2

2.The Ref Callback Attribute当我们渲染一个组件时，可以给组件添加ref属性，我们给这个属性添加一个回调方法，当组件渲染（mounted）完毕时，就会调用这个回调函数。 render: function() {    return (          );  },可以看到，上边的TextInput是我们的组件，ref属性后边赋予了一个函数，这就是回调函数，传入的参数就是我们的组件实例。当我们在dom节点如div中添加ref属性时，返回的是真实的dom节点，我们可以直接操作。但是如果渲染的是组件的话，如上面的TextInput，我们只能调用在组件中定义的方法，上边调用的focus()方法就是在TextInput组件中定义的方法。如果我们想要获取组件对应的浏览器中的对象，可以使用ReactDOM.findDOMNode(input)来获取dom节点。

3

3.The Ref String Attributeref的另外一个使用方法就是给ref属性一个字符串，相当于给组件起了一个名字，渲染完成后，就可以使用this.ref.name的方式获取组件类的实例。同样，如果是div一类的，获取到的是dom节点。如果是自定义组件，获取到的是组件类实例。var App = React.createClass({      componentDidMount : function(){        var node1 = this.refs.myinput;        var node2 = ReactDOM.findDOMNode(this.refs.myson);      },      render: function() {        return (        

                           
       );      }    });以上就是ref的使用方法。

4

下面是文档中的一个例子：var MyComponent = React.createClass({  handleClick: function() {    // Explicitly focus the text input using the raw DOM API.    if (this.myTextInput !== null) {      this.myTextInput.focus();    }  },  render: function() {    // The ref attribute is a callback that saves a reference to the    // component to this.myTextInput when the component is mounted.    return (      

        this.myTextInput = ref} />              
   );  } }); ReactDOM.render(  ,  document.getElementById('example') );可以看到，在MyComponent中的input的ref是一个回调函数，在回调函数中将this.myTextInut赋予了返回的实例(this的指向就是当前的MyConponent实例)，之后，又在下一个input点击响应事件函数中调用了这个实例对象。下面来翻译一下文档中的summary，有助于我们理解ref到底是做什么的。（注：可能不十分正确，但大意应该没错）Refs are a great way to send a message to a particular child instance in a way that would be inconvenient to do via streaming Reactive props and state.如果你觉得依靠互动性的props和state向某个特定子实例中传递消息不是很好的方式的话，refs是一个很好的解决办法。They should, however, not be your go-to abstraction for flowing data through your application.ref不应该成为你的应用中抽象的传递数据的方法。By default, use the Reactive data flow and save refs for use cases that are inherently non-reactive.所以，在应用互动数据流的同时，refs适合于那些非互动性的实例。

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2025 www.onijiang.com Corporation, All Rights Reserved