質問

チャットウィジェットで、スクロールアップするたびにメッセージの配列を表示するようにしています。今直面している問題は、メッセージが読み込まれるとき、スライダーが一番上に固定されたままであることです。私は、それが前の配列から最後のインデックス要素に焦点を当てたいのです。インデックスを渡すことで動的参照を作成できることはわかりましたが、それを実現するためにどのようなスクロール関数を使用するかも知っておく必要があります。

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

  render() {

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

解決方法は？

React 16.8 +, 機能性コンポーネント

const ScrollDemo = () => {
   const myRef = useRef(null)

   const executeScroll = () => myRef.current.scrollIntoView()    
   // run this function from an event handler or an effect to execute scroll 

   return (
      <> 
         <div ref={myRef}>Element to scroll to</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

StackBlitsのフルデモはこちら

React 16.3 +, クラスコンポーネント

class ReadyToScroll extends Component {
    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}>Element to scroll to</div> 
    }  

    executeScroll = () => this.myRef.current.scrollIntoView()
    // run this method to execute scrolling. 
}

クラスコンポーネント - Refコールバック

class ReadyToScroll extends Component {  
    render() {
        return <div ref={ (ref) => this.myRef=ref }>Element to scroll to</div>
    } 

    executeScroll = () => this.myRef.scrollIntoView()
    // run this method to execute scrolling. 
}

String refsを使用しないでください。

String refsはパフォーマンスに悪影響を及ぼし、コンポーザブルではなく、廃止されつつあります（2018年8月）。

文字列参照はいくつかの問題があり、レガシーとみなされ、おそらくは は、将来のリリースのいずれかで削除されます。[Reactの公式ドキュメント】。］

リソース1 リソース2

オプション スムーズスクロールアニメーション

/* css */
html {
    scroll-behavior: smooth;
}

子プロセスにrefを渡す

refはリアクトコンポーネントではなく、dom要素に付けたいのです。そのため、子コンポーネントに渡すときは、prop refに名前を付けることができません。

const MyComponent = () => {
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp>
} 

次に、ref prop を dom 要素に取り付けます。

const ChildComp = (props) => {
    return <div ref={props.refProp} />
}