时间戳

首页 > 解决方案 > Ref 获取子元素

javascript - Ref 获取子元素

问题描述

我有一个div容器，它包装了呈现给以下组件的第三方组件

<div id="selector">
 <div id="selector-1"/>
 <div id="selector-2"/>
 <div id="selector-3"/>
</div>

我为 div 容器创建了一个引用，我可以正常访问它。但是我如何使用该引用来访问特定的子元素selector-2呢？是否可以直接将 ref 元素添加到呈现的子项（第三方组件）？目前我使用 document.getElementById('selector-2') 来访问该元素。

<div ref={this.myref}>
  <ThirdpartyComponent/>
</div>

标签： javascriptreactjs

解决方案

您可以使用ReactDOM.findDOMNode()and来做到这一点Element.querySeletorAll()。下面是一个演示

class Three extends React.Component{
  render() {
    return(
      <React.Fragment>
        <div id="selector-1">One</div>
        <div id="selector-2">Two</div>
        <div id="selector-3">Three</div>
      </React.Fragment>
    );
  }
}

class App extends React.Component{
  myRef="comp"
  render() {
    return(
      <div ref={this.myRef}>
        <Three/>
      </div>
    );
  }
  componentDidMount = () => {
    let x = ReactDOM.findDOMNode(this.refs[this.myRef]);
    console.log([...x.querySelectorAll('div #selector-2')]);
    
  }
}

const app = document.getElementById('root');
ReactDOM.render(<App>Something Else</App>, app);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读