在React中将类组件转换为功能组件

Question

我有一个看起来像这样的类组件。

    class CommentSummary extends React.Component<Properties> {
      constructor(props: Properties) {
        super(props)

        this.onOpen = this.onOpen.bind(this)
      }

      onOpen() {
        const {
          props: {
            question,
            newestChild: { id },
            onOpen,
          },
        } = this
        if (!question) {
          return
        }

        onOpen(question.id, id)
      }
      
    }  

我希望能够将其转换为类似以下代码的功能组件。我的线条凌乱 在下面的onOpen方法中。如何转换下面的onOpen方法？

    const CommentSummary = (props: Properties) => {

      onOpen() {
        const {
          props: {
            question,
            newestChild: { id },
            onOpen,
          },
        } = this
        if (!question) {
          return
        }

        onOpen(question.id, id)
      }

    }

    export default CommentSummary

Answer 1

因为功能组件确实具有此功能（初始化参考实例）。因此，您应该将函数声明为const：

const CommentSummary = (props: Properties) => {

    const onOpen = () => {
        const {
            question,
            newestChild: { id },
            onOpen,
        } = props;
        if (!question) {
            return
        }

        onOpen(question.id, id)
    }
}