Question

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

我已经学习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获取将被渲染的input元素，并使用this.textInput将其存储到类字段中。

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

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

感谢您的帮助！

Answer 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是父组件与其子组件交互的唯一方式。要修改子项，请使用新道具重新呈现它。例如，如果您希望更改元素上的类，而不是获取对元素的访问权限并更改它，则可以将动态道具传递给它，而不是像

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

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

Answer 2

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

这个区块：

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

说明在挂载和卸载此(input) => { this.textInput = input; }字段时调用此input。 (input）只是一个参数名称，您可以随意调用它。所以你可以把它重写为：

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

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

关于第二个问题，

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

反应模型有点不同。 state是让组件相互交互的主要方式，而不是一个组件调用另一个组件。目前还不完全清楚你要做什么，但是当你想根据另一个组件的某个动作更新一个组件时，你通常会更新state，这会重新渲染具有新状态的组件

您仍然可以在DOM中查找其他组件，但我建议您在使用状态更新组件的react模型中进行更多思考。

React引用它们是如何使用的，它们何时使用？

2 个答案: