React refs 如何使用，何时使用？答案

【问题标题】：React refs how are they used, and when are they used?React refs 如何使用，何时使用？
【发布时间】：2018-07-29 00:52:46
【问题描述】：

您好，感谢您阅读此问题！

我已经学习 React 几个星期了，但我很难理解 refs 如何获取 React 的实例并将其放入 JS 变量中。

例如，我们可以讨论文档的示例：

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

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    this.textInput.focus();
  }

  render() {
    // Use the `ref` callback to store a reference to the text input DOM
    // element in an instance field (for example, this.textInput).
    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

我知道 ref 获取将被渲染的输入元素并使用 this.textInput 将其存储到类字段中。

但是我不明白为什么传递给 refs 的参数是（输入）如果嵌套了 jsx 标签会发生什么？例如两个输入？

还有没有明确的方法来引用使用 React 渲染/返回创建的元素？我说的是面向对象编程之类的东西：className.instanceName 或从 HTML 元素创建实例：new elementName()。

感谢您的帮助！

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

React 支持一个可以附加到任何组件的特殊属性。 ref 属性带有回调函数，callback 会在组件挂载或卸载后立即执行。

当你写作时

<input
      type="text"
      ref={(input) => { this.textInput = input; }} />

React 提取 ref 属性并在组件挂载后调用回调。在该回调函数中，react 传递输入的实例，这就是您在此处获得的参数。将上述内容视为一个函数

<input
      type="text"
      ref={this.callback} />

那个回调看起来像

const callback = (input) => { 
   this.textInput = input; 
}

根据文档：

当在 HTML 元素上使用 ref 属性时，ref 回调接收底层 DOM 元素作为其参数。

关于你的下一个问题：

但是我不明白为什么将参数传递给 refs 是（输入）如果嵌套了 jsx 标签会发生什么

传递给 div 的参数在您的示例中只是作为输入引用，您可以随意调用它，例如 input、inputRef、instance

在多个jsx标签嵌套时，ref应用于传递ref属性的元素。比如

<div ref={this.getRef}>
   <div>Hello React</div>
</div>

ref 获取的实例应用于外部 div，您可以从中访问子元素。

Codesandbox

也没有明确的方法来引用正在创建的元素使用 React 渲染/返回

refs 是 React 提供的一种引用方式，元素被创建。但是，您应该只在

时使用 refs

管理焦点、文本选择或媒体播放。
触发命令式动画。
与第三方 DOM 库集成。

大多数情况下，props 是父组件与其子组件交互的唯一方式。要修改一个孩子，你可以用新的道具重新渲染它。例如，如果您希望更改元素上的类，而不是访问该元素并更改它的类，您可以将动态 prop 传递给它，而不是像

<div className={this.props.className} />

或者事实上，使用state进行必要的更新

【讨论】：

【解决方案2】：

为了解释ref标签发生了什么，让我们把它分解成更小的部分......

这个区块：

<input
      type="text"
      ref={(input) => { this.textInput = input; }} />

说当这个input 字段被挂载和卸载时调用这个(input) => { this.textInput = input; }。 (input) 只是一个参数名称，您可以随意调用它。因此，您可以将其重写为：

<input
          type="text"
          ref={(myinputfield) => { this.textInput = myinputfield; }} />

它也会做同样的事情。在这两种情况下，input 和 myinputfield 都引用定义了 ref 属性的文本字段。

关于第二个问题，

也没有明确的方法来引用正在创建的元素使用 React 渲染/返回？我说的是对象之类的东西面向编程：className.instanceName 或从创建实例 HTML 元素：new elementName()。

反应模型有点不同。 state 是让组件相互交互的主要方式，而不是一个组件调用另一个组件。尚不清楚您要做什么，但是当您想根据另一个组件执行的某些操作来更新一个组件时，您通常会更新state，这将使用新状态重新渲染组件。

您仍然可以在 DOM 中查找其他组件，但我建议您在使用状态来更新组件的反应模型中多考虑一下。

【讨论】：