Reactjs React-等效于角度模板参考变量？

在React中，是否有任何替代品或工作方法来实现角度模板参考变量的工作

在Angular中，模板引用变量通常是对模板中DOM元素的引用。您可以使用散列符号（#）声明引用变量

例如，#firstNameInput在

元素上声明firstNameInput变量

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

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

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


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

Show
显示（姓氏）{
console.log（lastName.value）；
}

是，它被称为refs。

---

文档：

角度模板参考变量的直接对应项是

在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} />
    );
  }
}

类似于反应

ReactDOM.findDOMNode(this.barRef)

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

在较旧的React版本中，获取ref需要手动分配一个函数：

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

this.hiRef=ref}

其中，

ref

是有状态组件的组件实例，而非组件的DOM元素

---

在React中，REF的使用相对较少，通过道具传递回调函数通常是组件之间更可取的通信方式（从角度来说，将回调作为组件

@Input

传递）。

这是正确的，但根据您试图实现的目标，您甚至可能不需要REF。React文章（）中的这种想法可能值得一读。@DragoşPaulMarinescu同样适用于Angular。这可以用不同的方法来完成。@estus是的！但react与angular相比有很大的不同。从angular转换的开发人员会尝试使用他们从angular知道的东西，尽管在react中有更好的方法@DragoşPaulMarinescu我同意并在我的回答中提到了这一点。您可以使用refs，但在react中思考按钮和输入是一个组件（“模板”）中的子组件（组件）。输入更改存储在父状态（处理程序作为prop传递）；按钮也调用父级中定义的处理程序。如果需要更多共享值/状态，请使用reduxhow about ViewChildren？对于多个子项，应该有多个引用。这里介绍了如何处理这些问题，

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