React datepicker和typescript

k3fezbri 于 2023-04-07 发布在 TypeScript

关注(0)|答案(4)|浏览(148)

目前正在尝试使用React和Typescript与react-datepicker。
我有一个简单的设置，我想测试，但我一直得到以下错误：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

下面是使用DatePicker包的文件

import * as React from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

interface DateConstructor  {
    startDate: Date;
} 

export class DateSelector extends React.Component<{}, DateConstructor > {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date()
        };
    }

    private handleChange(date) {
        this.setState({
            startDate: date
        });
    }

    public render() {
        const { startDate } = this.state;
        return (
            <DatePicker 
                dateFormat="dd-mm-yyyy"
                selected={startDate} 
                onChange={this.handleChange}
            />
        )
    }
}

DatePicker包需要一个字符串或函数，这对我来说似乎非常奇怪？
如何解决这个问题？
下面的完整错误

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
invariant
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:118:15
ReactCompositeComponentWrapper.instantiateReactComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:20273:23
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29799:22
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21
Object.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:12868:35
ReactCompositeComponentWrapper.performInitialMount
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29803:34
ReactCompositeComponentWrapper.mountComponent
http://localhost:65273/dist/vendor.js?v=OjVxDpV6p_Jfz2P38F_R2lc3pjVsUisUejeIABZq7AE:29690:21

下面是我试图呈现DateSelector组件的文件

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

import { DataOutputSwitch } from './ComponentLibrary/DataOutputSwitch';
import { DatatypeSelector } from './ComponentLibrary/DatatypeSelector';
import { DateSelector } from './ComponentLibrary/DateSelector';

export class ComponentLibrary extends React.Component<RouteComponentProps<{}>, {}> {

    public render() {
        return (
            <div>
                <h1>Pair4Insights Component Library</h1>
                <p>This component demonstrates all separate components.</p>
                <div style={{display: 'flex', flexDirection: 'column'}}>
                    <h3>Data Output Switch</h3>
                    <DataOutputSwitch />
                    <h3>Datattype Selector</h3>
                    <DatatypeSelector datatype="revenue" />
                    <h3>Date Selector</h3>
                    <DateSelector />
                </div>
            </div>
        );
    }
}

typescript

来源：https://stackoverflow.com/questions/59734929/react-datepicker-and-typescript

4条答案

按热度按时间

omhiaaxx1#

我将这个组件插入到一个正在工作的Typescript React应用程序中，并进行了微小的修改，它可以正常工作。所以我怀疑这个问题是由这个组件以外的其他因素引起的。如果你注解掉这个组件而不导入它，这个错误会消失吗？
代码如下：

import * as React from 'react';
import DatePicker from "react-datepicker";

import "react-datepicker/dist/react-datepicker.css";

interface DateConstructor  {
    startDate: Date;
} 

export class DateSelector extends React.Component<{}, DateConstructor> {
    constructor(props) {
        super(props);
        this.state = {
            startDate: new Date()
        };
        this.handleChange = this.handleChange.bind(this);
    }

    private handleChange(date) {
        console.log('date is here!', date);
        this.setState({
            startDate: date
        });
    }

    public render() {
        const { startDate } = this.state;
        return (
            <DatePicker
                dateFormat="dd/MM/yyyy"
                selected={startDate} 
                onChange={this.handleChange}
            />
        )
    }
}

在App.tsx处导入：

import { DateSelector } from './DateSelector';

正如您所看到的，我所做的一些更改是绑定handleChange函数和更新日期格式（在问题代码处，这是一个不正确的输入）。

我希望这个答案能把你推向正确的方向。

赞(0）回复(0）举报 2023-04-07

kt06eoxx2#

selectedprop期望获取一个字符串作为默认的选定值。您正在传递一个日期对象。您可以使用useState钩子来维护状态，如下所示：

import {useState} from "react";

const YourComponent = () => {
   const [date, setDate] = useState("");

   return (
      <DatePicker 
          dateFormat="DD-MM-YYYY"
          selected={date} 
          onChange={date => setDate(date)}
       />
   );
}

赞(0）回复(0）举报 2023-04-07

jogvjijk3#

selected prop期望获取一个字符串作为默认的selected值。您正在传递一个date对象。您可以使用useState钩子来维护状态

赞(0）回复(0）举报 2023-04-07

3mpgtkmj4#

添加日期选择器.d.ts文件，其中：