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={&nbsp;foo:"bar",&nbsp;dynamicViews:[],&nbsp;myData:[] //get some data from the web}inputRef = React.createRef()componentDidMount(){&nbsp; this.createViews()}createViews = ()=>{const trs=[]for (let i = 1; i < this.state.myData.lenght; i++) {let ref =`myrefRow ${i}`this[ref]= React.createRef()&nbsp; const row = (&nbsp; <tr ref={this[ref]}><td>&nbsp; `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 //examplevalue=`myrefRow ${30}`&nbsp; 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这样，滚动条将转到您要查找的任何行。欢呼，希望对别人有帮助