为啥这个组件根本不显示？反应日期选择器

Posted 2023-05-07

【中文标题】为啥这个组件根本不显示？反应日期选择器

【英文标题】：Why doesn't this component show at all? React DatePicker为什么这个组件根本不显示？反应日期选择器

【发布时间】：2019-01-13 14:11:07

【问题描述】：

这里是组件：

import React,  Component  from 'react';
import DatePicker from 'react-datepicker';

class DatePickerCreater extends Component 
    constructor(props)
        super(props);
    

    render() 
        return (
            <DatePicker
                disabled=this.props.answer.isDisabled
                dateFormat="YYYY/MM/DD"
                selected=Date(this.props.answer.value)
                onChange=(e) => this.props.blurHandler(e.target.value,this.props.answer) 
            />
        );
    


export default DatePickerCreater

当我尝试渲染它时，它什么也没显示...

非常感谢您的每一个回答！

【问题讨论】：

我只能看到jsx sn-p。组件在哪里？

jsx sn-p 是整个组件。我已经从“react-datepicker”导入了组件，所以它不是我的组件，我已经删除了类定义和导出的其余代码，只是为了让它更容易

那么请不要省略组件的关键部分。问题可能出在那个部分。如果您想保持简单，可以省略导入和导出。

你是如何编译你的输出代码的？你能确认你正在运行正确编译的代码吗？构建的 div 是什么？你怎么知道是日期选择器组件渲染了这个？将 React 开发工具安装到 chrome 并获得更多关于正在发生的事情的见解。

我用您的代码创建了一个代码框示例，它可以正确呈现：codesandbox.io/s/4zj6j0pvq7。唯一的区别是我导入了 css 文件。不知道你有没有。

【参考方案1】：

selected 属性采用 moment.js 日期，而不是普通的 javascript 日期。您应该会收到一条错误消息，提示“date.clone 不是函数 "。您可以通过使用时刻日期来解决此问题：

import moment from 'moment';

class DatePickerCreater extends Component 
    render() 
        return (
            <DatePicker
                disabled=this.props.answer.isDisabled
                dateFormat="YYYY/MM/DD"
                selected=moment(this.props.answer.value)
                onChange=(e) => this.props.blurHandler(e.target.value, this.props.answer)
            />
        )
    

您也可能忘记导入react-datepicker css 文件。否则，弹出窗口将无法正确显示：

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

编辑

自从他们改用 date-fns 这个答案已经过时了。 如果您将 react-date-picker 与 >=2.0 版本一起使用，则不能再传递 moment.js 实例。而是使用本机 Date 对象并使用 date-fns 操作它们。

供参考：

在 1.8.0 版之前，此软件包使用 Moment.js。开始 v2.0.0，我们切换到使用 date-fns，它使用原生 Date 对象， 以减小包的大小。如果您从 1.8.0 切换到 2.0.0 或更高版本，请参阅上面的更新示例，查看examples site 以获取最新示例。

---

【讨论】：

这可能是真的，我改了。但它仍然没有显示：/

在 2019 年，他们用 date-fns 替换了 moment.js 之后，这仍然对我有帮助。我忘记导入 .css（尽管它在 GitHub 的示例中明确显示）

Thomas 是对的 - 将 moment.js 值传递给 selected 现在会使应用程序崩溃

@Skypho 我更新了答案以反映这一点。谢谢指点。

导入 CSS 对我来说是关键

【参考方案2】：

代码不够用，怎么告诉super()需要用props调用：

constructor(props)
   super(props);
   // ... code

【讨论】：

是的，已解决，但不能解决我的问题：/您还需要什么？告诉我，我会添加它。我可以看到，这是唯一与 datepicker 组件相关的东西，不是吗？

告诉我如何在其父类中呈现 DatePickerCreater 类