Ref 获取子元素答案

【问题标题】：Ref get child elementRef 获取子元素
【发布时间】：2019-03-19 13:08:11
【问题描述】：

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

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

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

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

【问题讨论】：

参考此参考stackoverflow.com/questions/37647061/…
你的最终目标是什么？可能一开始你的实施就走错了路……我总是尽量避免使用refs，并让我的父母可以从状态管理和/或道具访问我的模板数据。跨度>

标签： javascript reactjs

【解决方案1】：

您可以使用ReactDOM.findDOMNode() 和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>

【讨论】：

【解决方案2】：

只是 VanillaJS...

不知道为什么需要使用 getElementById 通过 id 直接访问之外的任何其他内容，但您可以处理外部 div 子级的列表，查找具有其 id（或任何其他）属性的给定值的元素，或者通过子集合中所需的索引位置。

function getKids(eref, cId, idx) {
    // kids is a list of all *direct* children of eref
    var kids = eref.children;
    console.log(kids);
    // kid is the particular node by id attribute with value cId
    var kid = null;
    // find kid by id
    for (var i = 0; i < kids.length; i++) {
        if (cId == kids[i].id) {
            kid = kids[i];
            break;
        }
    }
    // log kid found by search on id 
    console.log(kid);

    // log kid found by index (-1 for 0 index origin)
    console.log(kids[idx - 1]);
};

我添加了样式以在页面中提供点击目标 - 扩展 div 声明以包含结束标记，以确保将外部父 div 元素的子属性捕获为列表元素。 getKids 通过 id 或索引在子列表中找到所需的项目。

<div id="selector" onclick="getKids(this, 'selector-2', 2);" 
    style="padding:5px;width:10px;background-color:red;"
>
    <div id="selector-1"></div>
    <div id="selector-2"></div>
    <div id="selector-3"></div>
</div>

【讨论】：