时间戳

首页 > 解决方案 > React - 相当于 Angular 模板引用变量？

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

问题描述

是否有任何替代或解决方法可以在 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);
}

标签： reactjs

解决方案

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

在 React 16.3createRef中引入了：

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 术语中将回调作为 component 传递@Input）。

推荐阅读