react-datepicker导入DatePicker报元素类型无效错误如何解决

这个报错是导入方式和包的导出规则不匹配导致的：

• react-datepicker 的主组件 DatePicker 是默认导出（default export），不是命名导出
• 你写的 import { DatePicker } from "react-datepicker" 是命名导入语法，用这种写法拿到的DatePicker实际是undefined
• React 无法渲染值为undefined的组件，就会抛出你看到的「元素类型无效」错误。

• 把DatePicker的导入语句从命名导入改为默认导入
• 引入组件必需的官方样式文件，否则日期选择器会丢失样式、交互异常

修正后的完整可运行代码：

import { useState } from "react";
// 修正导入方式，同时引入必需样式
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function App() {
  const [startDate, setStartDate] = useState(new Date());

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>
        <DatePicker
          selected={startDate}
          onChange={(date) => setStartDate(date)}
        />
      </div>
    </div>
  );
}

补充：只有react-datepicker提供的辅助工具、子组件才需要用花括号的命名导入方式引入，主日期选择组件统一用默认导入。

内容的提问来源于stack exchange，提问作者dapidmini