无法在react类中声明常量

Question

我试图在react类中实现datepicker，在这个过程中，我在react类中声明了const，我正在处理这个类，并且得到了解析错误。有人能帮个忙吗申报有什么问题吗？

import React,{useState} from 'react';
import ReactDOM from 'react-dom';
import {Card, Container,Table,Form,InputGroup,Col,Button} from 'react-bootstrap';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import '../css/category.css';


class Categories extends React.Component{

  const date = useState(new Date());
  
   constructor(props){
     super(props);
   }

    componentDidMount() {
        document.title="Categories";
    }
   render(){

        return(<div>
            <Container fluid className="categorycardcont">
                <Card border="info">
                    <Card.Header className="categorycarddheader">CATEGORY SEARCH</Card.Header>
                    <Card.Title className="categorycardtitle"> Here one can find the category details involved in WebSite construction</Card.Title>
                    <Card.Body>
                      <Form>
                        <Form.Row className="align-items-center">
                          <Col sm={3} className="my-1">
                            <Form.Label>Category</Form.Label>
                            <Form.Control as="select">
                              <option>Please select Category here</option>
                              <option>Food</option>
                              <option>Travel</option>
                              <option>Restaurant</option>
                              <option>Technology</option>
                              <option>Gadgets</option>
                            </Form.Control>
                          </Col>
                          <Col sm={3} className="my-1">
                            <Form.Label>Created by</Form.Label>
                            <InputGroup>
                              <InputGroup.Prepend>
                                  <InputGroup.Text>@</InputGroup.Text>
                              </InputGroup.Prepend>
                              <Form.Control id="inlineFormInputGroupUserName" placeholder="UserName" />
                            </InputGroup>
                          </Col>
                          <Col sm={2} className="my-1">
                            <Form.Label>Created on</Form.Label>
                            <InputGroup>
                              <DatePicker selected={date}/>
                            </InputGroup>
                          </Col>
                          <Col sm={1} className="my-1">
                            <Form.Label>Active</Form.Label>
                            <Form.Check type="checkbox" id="autoSizingCheck2" className="activeCheckbox"/>
                          </Col>
                          <Col sm={1} className="searchButton">
                            <Button variant="success">Click Me!</Button>
                          </Col>
                        </Form.Row>
                      </Form>
                    </Card.Body>
                </Card>
            </Container>
            <Container fluid className="categorytablecont">
                <Table striped bordered hover variant="dark">
                    <thead>
                    <tr>
                        <th>Category</th>
                        <th>Description</th>
                        <th>Created By</th>
                        <th>Created On</th>
                        <th>Updated By</th>
                        <th>Updated On</th>
                    </tr>
                    </thead>
                </Table>
            </Container>
        </div>
);
    }
}

export default Categories;

我得到下面的错误。

未能编译/src/组件/类别。js行11:9:解析错误：意外标记

9 |类别类别。组件{10|

11|const date=useState（new Date()); | ^ 12|
13|构造函数（props）{14|超级（props）；此错误发生在构建时间，不能被驳回。

Answer 1

看起来您对钩子的使用感到困惑，钩子只能在功能组件中使用，所以您的功能组件代码如下所示

function Categories(props) {
 const date = useState(new Date());

 useEffect(() => {
  // is equivalent to didmount
  document.title = "Categories";
 
 }, [])

return (
 //// return what you are rendering
 )

}
 

Answer 2

不能在类组件中使用useState。它们应该用于功能组件。您应该将代码更改为：

constructor(props){
   super(props);
   this.state = {
       myDate: new Date()
   };
}

在这里，您可以找到有关Hooks的更多信息。

Answer 3

您不能在类组件中使用钩子。创建一个默认日期如下的状态，

 constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

并在模板中访问它，

 <InputGroup>
   <DatePicker selected={this.state.date} />
  </InputGroup>

工作代码-https://codesandbox.io/s/elated-waterfall-s8n7c?file=/src/App.js