Question

我想将ref添加到react元素。

现在我可以通过this.refs.combox,到达此位置，但是findDOMNode给出了一个错误，我想在其中添加一个引用，以便以后可以使用this.refs.combox到达它。有人可以帮忙吗？谢谢！

已更新：这是我的渲染功能。现在，我只是用div包围了combox。我想知道是否可以将引用直接添加到combox，而无需在其周围添加div。

Answer 1

创建参考 使用React.createRef（）创建引用，并通过ref属性将其附加到React元素。构造组件时，通常将引用分配给实例属性，以便可以在整个组件中对其进行引用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

访问参考 将ref传递到render中的元素时，可以在ref的当前属性处访问对节点的引用。

const node = this.myRef.current;

ref的值根据节点的类型而不同：

在HTML元素上使用ref属性时，使用React.createRef（）在构造函数中创建的ref会接收底层DOM元素作为其当前属性。在自定义类组件上使用ref属性时，ref对象将接收该组件的已安装实例作为其当前实例。您不能在功能组件上使用ref属性，因为它们没有实例。

以下示例说明了差异。

添加对DOM元素的引用 此代码使用ref来存储对DOM节点的引用：

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />

        <input
          type="button"
          value="Focus the text input"
          onClick={this.focusTextInput}
        />
      </div>
    );
  }
}

React将在安装组件时为当前属性分配DOM元素，并在卸载时将其分配回null。 ref更新发生在componentDidMount或componentDidUpdate生命周期挂钩之前。

如何为react元素（节点reactNode！）添加参考

1 个答案: