反应参考：什么等于 document.querySelectorAll

Question

我刚开始使用 React refs，我想选择 ref=this.contentRef 的所有图标。 使用 js 我会这样做：document.querySelectorAll('.content i')。如何使用 ref 执行此操作？

someMethode() {
  const content = this.contentRef.current.childNodes;
  const content2 = document.querySelectorAll('.content i');
}

render() {
  return (
    <div ref={this.contentRef} className="content">
      <div>
        <i className="fa fa-square" />
      </div>
      <div>
        <i className="fa fa-square" />
      </div>
      <div>
        <i className="fa fa-square" />
      </div>
    </div>
  )
}

Answer 1

正确的做法是：

 <MyComponent ref={(c) => this.myComponent = c} /> // then check when this.myComponent is NOT undefined 

问题在于您想对 refs 做什么。在调用子方法或为所有剩余情况进行计算（渲染大小等）时非常有用，有替代模式可以在没有参考的情况下完成这项工作

Answer 2

您实际上可以将 QuerySelectorall 与 ReactDOM.findDOMNode(this) 一起使用 尝试这样的事情

const node = ReactDOM.findDOMNode(this);
// Get child nodes
if (node instanceof HTMLElement) {
const child = node.querySelector('.someClass');
}