gpt4 book ai didi

javascript - ReactJS获取子元素的引用并设置其scrollTop位置

转载 作者:行者123 更新时间:2023-12-03 14:32:22 24 4
gpt4 key购买 nike

考虑以下呈现的 ReactJS 组件:

render () {
return (
<div className='ux-table' onScroll={this.handleScroll}>
<table ref='mainTable>
<Header>
**Rows data here***
</table>
</div>
);

以及 Header 子组件:

render () {
return (
<thead ref='tableHeader'>
<tr> ** column data here ** </tr>
</thead>
);
}

我需要在主组件句柄上获取主组件 (mainTable) 的 scrollTop 位置并将其设置为子 Header 组件 ( tableHeader),如以下 Javascript 代码:

document.querySelector('.ux-table').onscroll = function (e) {
// called when the window is scrolled.
var topOfDiv = Math.max(document.querySelector(".ux-table").scrollTop - 2, 0);
document.getElementsByTagName('thead')[0].style = "top:" + topOfDiv + "px;";
}

我对主要组件的尝试:

handleScroll = (event) => {
var topOfDiv = Math.max(this.refs.mainTable.scrollTop - 2, 0);
this.refs.tableHeader.scrollTop = topOfDiv;
}

在第一行中,this.refs.mainTable.scrollTop 的值为零 (0)。在第二行,我收到错误,因为我无法直接访问子组件。

简而言之,如何:

a) 使用 ref 读取并设置 React 组件的 scrollTop 属性

b) 从父组件 ref 获取对子组件的访问权限

感谢您的帮助。

最佳答案

我不确定这是否有帮助,但我根据 react-markdown 制作了一个组件.

它显示用 markdown 编写的帮助页面,并根据上下文滚动到标题。

渲染组件后,我根据 markdown header 搜索 header :

import React, { Component } from 'react';
import Markdown from 'react-markdown';

export default class Help extends Component {
constructor(props) {
super(props);
this.state = {
md : null
}
this.helpref = React.createRef();
this.fetchdata()
}

fetchdata() {
fetch("Help-Page.md")
.then((r) => r.text())
.then(text => {
this.setState({
md:text
});

})

}

componentDidUpdate(){
// Here i search for the header like : ## My Header
let part=this.props.helpHeader.match(/(#+)\s(.*)/)
// If I found it , i search on child for it
if(part)
for(let childnod of this.helpref.current.childNodes)
{
// If the child is found
if(childnod.nodeName == "H"+part[1].length && childnod.innerText== part[2])
{
// I scroll to the element
this.helpref.current.scrollTop = childnod.offsetTop
}

}

}
render() {

return (
<div className="help" ref={this.helpref}>
<Markdown source={this.state.md} />
</div>

);
}
}

照顾好

this.helpref = React.createRef();

渲染后需要获取元素,在React组件上不起作用

关于javascript - ReactJS获取子元素的引用并设置其scrollTop位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45700136/

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