Question

我无法正确显示组件react-datepicker。

它实际上显示为this。

我希望它至少可以像documentation for the component does一样显示。

我首先认为这是一个依赖性问题，然后添加了文档所说的所有依赖性。结果仍然相同。

一些stackoverflow问题对此进行了讨论，并提到了缺少的样式表。但是我用npm导入了所有内容，所以这不应该成为问题。

我的班级组件看起来像这样：

import React from "react";
import "./style.css";
import DatePicker from "react-datepicker";

class Filters extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      startDate : new Date()
    };
    this.handleStartChange = this.handleStartChange.bind(this);
  }

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


  render() {
    return (
      <div className="filters">
          <div id="filterbox">
            <p id="titre">Filtres</p>
            <DatePicker 
              selected={this.state.startDate}
              onChange={this.handleStartChange} />
          </div>
      </div>
    )
  }
}



export default Filters;

如果问题很明显，我事先表示歉意，我对reactjs很陌生。

Answer 1

您忘记导入软件包css。

从文档中： import "react-datepicker/dist/react-datepicker.css";

Answer 2

我认为您也必须导入react-datepicker.css，而不仅仅是软件包本身。

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

以下是如何在React中使用Datepicker的简单示例视图。您还需要从此软件包中获取CSS文件（或提供您自己的）。以下示例显示了如何包含来自以下位置的CSS：如果您的构建系统支持要求CSS文件，则此软件包（Webpack就是这样做的。）

Answer 3

您尚未导入其CSS文件。

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

如何正确显示react-datepicker？

3 个答案: