Question

我仍在学习React，我想知道是否有可能将下面的功能组件变成类组件。

组件：

import React, { useState } from "react"
import { useStaticQuery, graphql } from "gatsby"
import Navbar from "./navbar"

const Layout = ({ location, title, children }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  const [classNames, setClassNames] = useState('')
  const updateClasses = (classNames) => {
    setClassNames(classNames)
  }
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          menuLinks {
            link
            name
          }
        }
      }
    }
  `)
  return (
    <div>
      <Navbar pages={ data.site.siteMetadata.menuLinks } updateClassNames={updateClasses} />
      <main className={classNames}>{children}</main>
    </div>
  )
}

export default Layout

我最大的问题是传递给函数location, title, children的参数。他们会发生什么。我目前不在使用它们，但是稍后将需要它们。

Answer 1

除了使用钩子，类或函数组件没有太大区别。对于您当前的函数组件，只需像普通函数中的其他变量一样使用drive.files.list({ auth: jwtClient, pageSize: 10, fields: 'nextPageToken, files(id, name)', q: "'12CCq1GGoTyDW_Ox09TZf5BDgaPAjB0AR' in parents", // Added }, (err, res) => {，location等title。

为什么需要转换为类组件？

Answer 2

您不需要类组件来提升子组件中的类，值或任何数据，这是相同的行为，而不是基于类的组件或功能组件。您只需要通过props传递一个函数，该函数将在子组件中触发以将一些数据再次提供给父组件。

在您的父组件中，您需要设置功能。不知道它的结构，它看起来像：

someFunction= value => {
   console.log('I have the value: ', value)
}

return <Layout someFunction={someFunction}

免责声明：您可能需要使代码适应您的组件。这个想法是设置一个函数并通过return中的props传递它。

然后，在<Layout>组件中，可以像使用location，title和children一样对函数进行解构，并在需要时触发：

import React, { useState } from "react"
import { useStaticQuery, graphql } from "gatsby"
import Navbar from "./navbar"

const Layout = ({ location, title, children, someFunction }) => {
  const rootPath = `${__PATH_PREFIX__}/`
  const [classNames, setClassNames] = useState('')
  const updateClasses = (classNames) => {
    setClassNames(classNames)
  }

  const handleClick=()=>{
    someFunction('hello')
  }
  
  const data = useStaticQuery(graphql`
    {
      site {
        siteMetadata {
          menuLinks {
            link
            name
          }
        }
      }
    }
  `)
  return (
    <div>
      <Navbar pages={ data.site.siteMetadata.menuLinks } updateClassNames={updateClasses} onClick={()=>handleClick} />
      <main className={classNames}>{children}</main>
    </div>
  )
}

export default Layout

在此虚拟示例中，您将在单击'hello'时将<Navbar>传递给父组件，当然，您可以传递任何所需的值或使用useEffect钩子或无论你需要什么。这是将数据从子组件传递到父组件的方法。

将功能组件转换为类组件

2 个答案: