gpt4 book ai didi

javascript - Ref 获取子元素

转载 作者:行者123 更新时间:2023-12-02 23:59:24 25 4
gpt4 key购买 nike

我有一个 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>

最佳答案

您可以使用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>

关于javascript - Ref 获取子元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55241853/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com