如何使用React中的Ref-创新互联

这篇文章主要讲解了如何使用React中的Ref，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

React中Ref 的使用 React v16.6.3

在典型的React数据流中，props是父组件与其子组件交互的唯一方式。要修改子项，请使用new props 重新呈现它。但是，在某些情况下，需要在典型数据流之外强制修改子项。要修改的子项可以是React组件的实例，也可以是DOM元素。对于这两种情况，React都提供了api。

refs有一些很好的用例：

• 1.文本选择或媒体播放。
• 2.触发势在必行的动画。
• 3.与第三方DOM库集成。

避免将refs用于可以声明性地完成的任何操作。

*不要过度使用Refs

如果您之前使用过React，那么您可能熟悉一个旧的API，其中ref属性是一个字符串"textInput"，并且DOM节点被访问为this.refs.textInput。建议不要使用它，因为字符串引用有一些问题，被认为是遗留问题，很可能会在未来的某个版本中删除。

当组件安装时，React将使用DOM元素调用ref回调，并在卸载时调用null。

在componentDidMount或componentDidUpdate触发之前，Refs保证是最新的.

class CustomTextInput extends React.Component {
 constructor(props) {
 super(props);

 this.textInput = null;

 this.setTextInputRef = element => {
  this.textInput = element;
 };

 this.focusTextInput = () => {
  // Focus the text input using the raw DOM API
  if (this.textInput) this.textInput.focus();
 };
 }

 componentDidMount() {
 // autofocus the input on mount
 this.focusTextInput();
 }

 render() {
 // Use the `ref` callback to store a reference to the text input DOM
 // element in an instance field (for example, this.textInput).
 return (
  

  
  
  
 );
 }
}