将类组件引用转换为功能组件使用Ref hook

Question

如何使用useRef将以下类组件语法转换为功能组件？

moveBody = index => {
this.scrollRef.scrollTo({
x: index * width,
animation: false
})
}
<ScrollView pagingEnabled ref={node=>this.scrollRef=node}>
...
</ScrollView>

Answer 1

有关详细信息，请参阅 React HooksuseRef文档。

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>