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

您好，感谢您阅读这个问题！

我已经学习 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 render/return 创建的元素？我说的是面向对象编程：className.instanceName 或使用 new elementName() 从 HTML 元素创建实例。

感谢您的帮助！

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; 
}

根据文档：

当 ref 属性用于 HTML 元素时，ref打回来 接收底层 DOM 元素作为其参数。

关于你的下一个问题：

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

传递给 div 的参数只是在示例中作为输入引用，您可以将其称为任何您想要的名称，例如input, inputRef, instance

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

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

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

代码沙箱

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

Well refs是 React 提供的一种引用、创建元素的方式。但是你应该只在以下情况下使用 refs

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

最经常，props是父组件与其子组件交互的唯一方式。要修改子项，您可以使用新的道具重新渲染它。例如，如果您希望更改元素上的类，而不是访问该元素并更改它的类，您可以将动态属性传递给它，例如

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

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