React - 相当于 Angular 模板引用变量？

Question

React 中实现 Angular 的模板引用变量的工作是否有任何替代或解决方法？

在 Angular 中，模板引用变量通常是对模板中 DO​​M 元素的引用。使用井号 (#) 声明引用变量。

例如，#firstNameInput 在 <input> 元素上声明了 firstNameInput 变量。

<input type="text" #firstNameInput>
<input type="text" #lastNameInput>

之后，您可以在模板内的任何位置访问该变量。例如，我将变量作为参数传递给事件。

<button (click)="show(lastNameInput)">Show</button>


show(lastName){
    console.log(lastName.value);
}

Answer 1

Angular 模板引用变量的直接对应物是React ref。

在 React 16.3 中引入了createRef：

class Some extends React.Component {
  fooRef = React.createRef();
  barRef = React.createRef();

  componentDidMount() {
    console.log(this.fooRef.current instanceof Node); // true
    console.log(this.barRef.current instanceof Bar); // true
  }

  render() {
    return (
      <input type="text" ref={this.fooRef}>
      <Bar ref={this.barRef} />
    );
  }
}

它的作用类似于 Angular 引用和 ViewChild，ref 是一个具有 current 属性的对象，它是有状态组件的组件实例和非组件的 DOM 元素。

这个 Angular 查询

@ViewChild('barRef', { read: ElementRef })

类似于 React

ReactDOM.findDOMNode(this.barRef)

对于可以以不同方式通信的组件，通常应避免使用。

在较旧的 React 版本中，获取 ref 涉及使用函数手动分配它：

<Hi ref={ref => this.hiRef = ref}

ref 是有状态组件的组件实例和非组件的 DOM 元素。

在 React 中，refs 的使用相对较少，通过 props 传递回调函数通常是组件之间更可取的通信方式（在 Angular 术语中将回调作为组件 @Input 传递）。

Answer 2

是的，它被称为 refs。 文档：https://reactjs.org/docs/refs-and-the-dom.html