ReactJS如何滚动到一个元素

Question

我有一个聊天小部件，每次我向上滚动时，它都会拉出一系列消息。我现在面临的问题是，在加载消息时，滑块保持固定在顶部，我希望它专注于上一个数组中的最后一个索引元素。我发现可以通过传递索引来创建动态引用，但是我还需要知道要使用哪种滚动功能才能实现这一点 handleScrollToElement(event) {    const tesNode = ReactDOM.findDOMNode(this.refs.test)    if (some_logic){      //scroll to testNode          }  }  render() {    return (      <div>        <div ref="test"></div>      </div>)  }

Answer 1

我可能参加聚会的时间很晚，但是我试图以适当的方式对项目实施动态引用，并且找到了所有答案，直到知道并不能完全满足我的喜好，所以我想出了一个我认为是的解决方案简单，并使用本机和推荐的反应方式来创建引用。

有时，您会发现文档的编写方式假定您具有已知的视图数量，并且在大多数情况下此数量是未知的，因此在这种情况下，您需要一种解决问题的方法，对所需数量的未知视图创建动态引用在课堂上展示

因此，我能想到并能完美工作的最简单的解决方案是执行以下操作

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

这样，滚动条将转到您要查找的任何行。

欢呼，希望对别人有帮助