如何将类组件转换为功能组件？

Question

我是 React 新手，我正在尝试将下面的代码转换为函数组件，但它不起作用，我从未使用过类组件。谁能帮我转换一下？ 提前致谢。

import React from 'react'
import ReactDOM from 'react-dom'
import ScrollSnap from 'scroll-snap'

import './styles.css'

class App extends React.Component {
  container = React.createRef()

  bindScrollSnap() {
    const element = this.container.current
    new ScrollSnap(element, {
      snapDestinationY: '90%',
    }).bind()
  }

  componentDidMount() {
    this.bindScrollSnap()
  }

  render() {
    return (
      <div ref={this.container}>
      </div>
 )
}

Answer 1

这是你需要做的：

1. 将createRef 替换为useRef，这是要在功能组件中使用的功能挂钩。
2. 将 componentDidMount 替换为 useEffect() 并使用一个空数组作为依赖项数组，它基本上在挂载时运行该代码一次。

const App = () => {
  const containerRef = React.useRef(null);

  const bindScrollSnap = () => {
    new ScrollSnap(containerRef , {
      snapDestinationY: '90%',
    }).bind()
  }
  React.useEffect(() => {
    bindScrollSnap();
  }, []);
  return <div ref={containerRef}></div>
}