我有一个聊天小部件,每当我向上滚动时,它就会弹出一个消息数组。我现在面临的问题是,当消息加载时,滑块固定在顶部。我想让它关注上一个数组的最后一个索引元素。我发现我可以通过传递索引来进行动态引用,但我也需要知道使用哪种滚动函数来实现这一点

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }

当前回答

我可能迟到了,但我试图实现动态引用到我的项目的正确方式和所有的答案,我已经找到,直到知道不是安静的满足我的喜欢,所以我想出了一个解决方案,我认为是简单的,并使用本机和推荐的反应方式来创建引用。

有时,您会发现文档的编写方式假设您有一个已知的视图数量,而在大多数情况下,这个数字是未知的,因此您需要一种方法来解决这个问题,在这种情况下,创建动态引用到您需要在类中显示的未知视图数量

所以我能想到的最简单且完美无缺的解决方案是这样做的

class YourClass extends component {

state={
 foo:"bar",
 dynamicViews:[],
 myData:[] //get some data from the web
}

inputRef = React.createRef()

componentDidMount(){
  this.createViews()
}


createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {

let ref =`myrefRow ${i}`

this[ref]= React.createRef()

  const row = (
  <tr ref={this[ref]}>
<td>
  `myRow ${i}`
</td>
</tr>
)
trs.push(row)

}
this.setState({dynamicViews:trs})
}

clickHandler = ()=>{

//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example

value=`myrefRow ${30}`

  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}


render(){

return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>


)

}

}

export default YourClass

这样,滚动就会转到你要找的任何一行。

干杯,希望它能帮助别人

其他回答

为了自动滚动到特定的元素,首先需要使用文档选择该元素。getElementById,然后我们需要使用scrollIntoView()滚动。请参考以下代码。

   scrollToElement= async ()=>{
      document.getElementById('id001').scrollIntoView();
    } 

上述方法对我来说很有效。

我有一个简单的场景,当用户点击我的材质UI导航栏的菜单项时,我想要向下滚动到页面上的部分。我可以使用引用和线程他们通过所有的组件,但我讨厌线程道具通过多个组件,因为这使得代码脆弱。

我只是在我的react组件中使用了香草JS,结果证明它工作得很好。在我想要滚动的元素上放置一个ID,在我的头组件中,我只是这样做了。

const scroll = () => {
  const section = document.querySelector( '#contact-us' );
  section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};

也许有人会遇到像我这样的情况

https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

如何度量DOM节点? 测量DOM节点位置或大小的一种基本方法是使用回调ref。每当ref附加到不同的节点时,React就会调用该回调。下面是一个小演示:

function MeasureExample() {
  const [height, setHeight] = useState(0);

  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);// you can scroll in this line 
    }
  }, []);

  return (
    <>
      <h1 ref={measuredRef}>Hello, world</h1>
      <h2>The above header is {Math.round(height)}px tall</h2>
    </>
  );
}

在本例中,我们没有选择useRef,因为对象引用不会通知我们当前引用值的更改。使用回调引用可以确保即使稍后子组件显示了被测量的节点(例如,在响应单击时),我们仍然会在父组件中得到关于它的通知,并可以更新测量值。

注意,我们将[]作为依赖数组传递给useCallback。这确保了我们的ref回调在重新渲染之间不会改变,所以React不会不必要地调用它。

在这个例子中,回调ref只会在组件挂载和卸载时被调用,因为呈现的组件在任何重新呈现器中都保持存在。如果你想在组件调整大小时收到通知,你可以使用ResizeObserver或在其上构建的第三方Hook。

你可以使用useRef和scrollIntoView。

使用useReffor你想滚动到的元素:这里我想滚动到PieceTabs元素,这就是为什么我用一个盒子(div)包装它,这样我就可以访问dom元素

您可能对refs很熟悉,它主要是作为一种访问DOM的方式。如果你传递一个ref对象给React, React会在相应的DOM节点发生变化时将其.current属性设置为相应的DOM节点。看医生

...
const tabsRef = useRef()
...
<Box ref={tabsRef}>
   <PieceTabs piece={piece} value={value} handleChange={handleChange} />
</Box>
...

创建一个处理滚动的函数:

  const handleSeeCompleteList = () => {
    const tabs = tabsRef.current
    if (tabs) {
      tabs.scrollIntoView({
        behavior: 'smooth',
        block: 'start',
      })
    }
  }

当你点击滚动到目标时,在你想要的元素上调用这个函数:

 <Typography
  variant="body2"
  sx={{
    color: "#007BFF",
    cursor: "pointer",
    fontWeight: 500,
  }}
  onClick={(e) => {
    handleChange(e, 2);
    handleSeeCompleteList(); // here we go
  }}
>
  Voir toute la liste
</Typography>;

好了

我可能迟到了,但我试图实现动态引用到我的项目的正确方式和所有的答案,我已经找到,直到知道不是安静的满足我的喜欢,所以我想出了一个解决方案,我认为是简单的,并使用本机和推荐的反应方式来创建引用。

有时,您会发现文档的编写方式假设您有一个已知的视图数量,而在大多数情况下,这个数字是未知的,因此您需要一种方法来解决这个问题,在这种情况下,创建动态引用到您需要在类中显示的未知视图数量

所以我能想到的最简单且完美无缺的解决方案是这样做的

class YourClass extends component {

state={
 foo:"bar",
 dynamicViews:[],
 myData:[] //get some data from the web
}

inputRef = React.createRef()

componentDidMount(){
  this.createViews()
}


createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {

let ref =`myrefRow ${i}`

this[ref]= React.createRef()

  const row = (
  <tr ref={this[ref]}>
<td>
  `myRow ${i}`
</td>
</tr>
)
trs.push(row)

}
this.setState({dynamicViews:trs})
}

clickHandler = ()=>{

//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example

value=`myrefRow ${30}`

  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}


render(){

return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>


)

}

}

export default YourClass

这样,滚动就会转到你要找的任何一行。

干杯,希望它能帮助别人