Reactjs 将类组件转换为功能组件答案

【问题标题】：Reactjs convert class components to functional componentsReactjs 将类组件转换为功能组件
【发布时间】：2019-12-05 13:04:53
【问题描述】：

我是反应新手。我想在我的项目中使用表单步进器。我找到了一个库，但在那个库中使用了类组件。我对将类组件转换为功能组件有点困惑。我对反应知之甚少。

import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import Stepper from 'react-stepper-horizontal'
import { Card } from 'reactstrap'
import GeneralForm from './../../components/con/GeneralForm'
import PersonalDetailsForm from './../../components/con/PersonalDetailsForm'
import NomineeDetailsForm from './../../components/con/NomineeDetailsForm'

const ConCreate = (props) => {


  constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
      page: 0,
      steps: [
        {title: 'Visitor Details'},
        {title: 'Personal Details'},
        {title: 'Nominee Details'}
      ]
    };
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 });
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 });
  }




  return (

    <Card>
       <Stepper steps={ steps } activeStep={ page } />
         {page === 0 && <GeneralForm onSubmit={nextPage} />}
         {page === 1 && (
       <PersonalDetailsForm
       previousPage={previousPage}
       onSubmit={nextPage}
       />
       )}
       {page === 2 && (
       <NomineeDetailsForm
       previousPage={previousPage}
       onSubmit={onSubmit}
       />
       )}
     </Card>
  )
}

ConCreate.propTypes = {

}

const mapDispatchToProps = {}

function mapStateToProps (state) {

}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ConCreate)

如何在功能组件中转换以下代码

constructor(props) {
    super(props);
    this.nextPage = this.nextPage.bind(this);
    this.previousPage = this.previousPage.bind(this);
    this.state = {
      page: 0,
      steps: [
        {title: 'Visitor Details'},
        {title: 'Personal Details'},
        {title: 'Nominee Details'}
      ]
    };
  }

  nextPage() {
    this.setState({ page: this.state.page + 1 });
  }

  previousPage() {
    this.setState({ page: this.state.page - 1 });
  }

请建议我如何将类组件转换为功能组件。

【问题讨论】：

你必须使用 useState from react 来管理你的状态，所以你不需要在类中声明构造函数。这样做你不需要类和函数就可以了。

标签： reactjs react-redux

【解决方案1】：

检查下面的代码：

import React, {useState} from 'react'
import {connect} from 'react-redux'
import { Link } from 'react-router-dom'
import PropTypes from 'prop-types'
import Stepper from 'react-stepper-horizontal'
import { Card } from 'reactstrap'

import GeneralForm from './../../components/con/GeneralForm'
import PersonalDetailsForm from './../../components/con/PersonalDetailsForm'
import NomineeDetailsForm from './../../components/con/NomineeDetailsForm'

const ConCreate = (props) => {

  const initStepsValue = [
    {title: 'Visitor Details'},
    {title: 'Personal Details'},
    {title: 'Nominee Details'}
  ]

  const [page, setPage] = useState(0)
  const [steps, setSteps] = useState(initStepValue)

  const nextPage = () => setPage(page + 1) 
  const prevPage = () => previousPage(page - 1)


  return (
    <Card>
       <Stepper steps={ steps } activeStep={ page } />
         {page === 0 && <GeneralForm onSubmit={nextPage} />}
         {page === 1 && (
           <PersonalDetailsForm
             previousPage={previousPage}
             onSubmit={nextPage}
           />
         )}
         {page === 2 && (
           <NomineeDetailsForm
             previousPage={previousPage}
             onSubmit={onSubmit}
           />
         )}
     </Card>
  )
}

ConCreate.propTypes = {}

const mapDispatchToProps = {}

const mapStateToProps = state => ({})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ConCreate)

【讨论】：

【解决方案2】：

功能组件不像类那样使用状态。不过，您可以将 useState 方法与功能组件一起使用。但要回答你的问题。

  class MyClassComponent extends Component {
     render() {
      return(
       // code
    )
   }      
 }
    export default MyClassComponent;

这是一个功能组件

function MyFunctionalComponent() {
    return(
    //code
  )
}
export default MyFunctionalComponent;

【讨论】：

【解决方案3】：

用这段代码替换你的构造函数和函数，基本上你不需要构造函数和'this'。

const [page, setPage] = React.useState(0);
const [steps, setSteps] = React.useState([ 
        {title: 'Visitor Details'},
        {title: 'Personal Details'},
        {title: 'Nominee Details'}
        ])

function nextPage() {
    setPage(page + 1)
  }

function previousPage() {
    setPage(page - 1)
}

【讨论】：