将 React 函数组件转换为类组件

Question

我正在使用 React.js，我想在类中转换我的函数。这是我的代码：import React, {useState} from "react";import DatePicker from "react-datepicker";import "react-datepicker/dist/react-datepicker.css";import classes from "./Datepicker.css";const Datepicker = () => {    const [startDate, setStartDate] = useState(new Date());    return (        <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}                    onChange={date => setStartDate(date)}/>    );};export default Datepicker;我这样想：class Datepicker extends Component {    render(){        const [startDate, setStartDate] = useState(new Date());                    return (            <DatePicker className="custom-select"    dateFormat="dd/MM/yyyy" selected={startDate}                onChange={date => setStartDate(date)}/>        )    }}export default Datepicker;但我得到了这个：React Hook "useState" cannot be called in a class component.请问你能帮帮我吗 ？非常感谢 ！

Answer 1

State 是类组件中的实例变量，并且您的 setter 需要是一个方法。

class Datepicker extends Component {

    constructor(props){

      super(props);

      this.state = {startDate: new Date()};

    }

    

    setStartDate = (startDate) => {

      this.setState({startDate});

    }

    render(){

        const {startDate} = this.state;

        

        return (

            <DatePicker 

                className="custom-select"    

                dateFormat="dd/MM/yyyy" 

                selected={startDate}

                onChange={this.setStartDate}

            />

        )

    }

}

export default Datepicker;

Answer 2

您需要在类组件中使用状态变量。

class Datepicker extends Component {

    state = { startDate: new Date() };

   

    setStartDate = (startDate) => {

      this.setState({ startDate });

    }

    render(){

        const { startDate } = this.state;

        

        return (

            <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}

                onChange={this.setStartDate}/>

        )

    }

}

export default Datepicker;

Answer 3

不可能在类组件中使用“useState”、“useEffect”等 React 钩子。尽管您可以使用this.setState类组件来实现类似的东西

class Datepicker extends Component {

  constructor(props) {

    this.state = {

      startDate: new Date(),

    }

  }

  render() {

    const { startDate } = this.state

    return (

      <DatePicker className="custom-select" dateFormat="dd/MM/yyyy" selected={startDate}

        onChange={date => this.setState({ startDate: date })} />

    )

  }

}

export default Datepicker;

为什么你想使用类组件呢？有具体案例吗？