为什么react.js中需要ref?

时间:2019-03-06 06:59:27

标签: javascript reactjs

如果ref也可以实现同样的目的时,如果document.querySelector做出反应,会是什么用例?

1 个答案:

答案 0 :(得分:1)

document.querySelector()无法满足refs的目的。 因为refs用于定位React组件,而document.querySelector()返回HTML元素 考虑这个例子。

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       childid:"someid"
    }
  }
  render() {
    return <Child ref={this.myRef} id={this.state.childid} />;
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
       data:"something"
    }
  }
  render() {
    return <div id={this.props.id}/>;
  }
}

在以上代码中,您可以使用父元素中的<div>获得document.querySelector()。但是您无法在父级内部获得<Child/>组件。没有引用,您将无法以data的状态访问Child