我有一个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>
答案 0 :(得分: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>
答案 1 :(得分:0)
只是VanillaJS ...
不知道为什么除了使用getElementById通过id进行直接访问外,是否还需要其他任何东西,但是您可以处理外部div的子代的列表,查找具有其id(或任何其他)属性的给定值的元素,或者通过在子集合中所需的索引位置。
last
我添加了样式以在页面中提供点击目标-扩展了div声明以包括结束标记,以确保捕获为外部父div元素的children属性的列表元素。 getKids通过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]);
};