Преобразование ref компонента класса в функциональный компонент useRef hook

Question

Как преобразовать следующий синтаксис компонента класса в функциональный компонент, используя useRef?

moveBody = index => {
      this.scrollRef.scrollTo({
        x: index * width,
        animation: false
      })
  }

<ScrollView pagingEnabled ref={node=>this.scrollRef=node}>
 ...
</ScrollView>

Answer 1

Подробнее см. Документацию React Hooks useRef.

const App = () => {
  const scrollRef = React.useRef(null);
  
  const handleClick = () => console.log(scrollRef.current)
  
  return <div ref={scrollRef} onClick={handleClick}>Click Me</div>
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>