在Deno Fresh中使用react-datepicker遇异常，如何正确集成？

架构老林

2026-7-5

解决Deno+Preact Island组件中react-datepicker的使用问题

核心问题说明

react-datepicker是为React设计的库，直接在Preact环境使用需要处理React/Preact兼容，同时必须导入组件样式才能正常渲染。以下是具体修复步骤：

步骤1：配置Deno的React别名与导入映射

在deno.json中添加Preact对React的兼容别名，同时统一配置react-datepicker的导入规则，避免终端报错：

{
  "imports": {
    "react": "https://esm.sh/preact/compat",
    "react-dom": "https://esm.sh/preact/compat",
    "react-datepicker": "npm:react-datepicker@4.23.0",
    "react-datepicker/dist/react-datepicker.css": "npm:react-datepicker@4.23.0/dist/react-datepicker.css"
  }
}

步骤2：补全样式导入

react-datepicker依赖自带CSS才能显示完整UI，必须在组件中导入：

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { useState } from 'preact/hooks';

步骤3：修正JSX属性错误

JSX中label的for属性需替换为htmlFor（避免与JS关键字冲突）：

<label className='my-5 flex flex-col gap-y-2' htmlFor={name}>

完整修正后的组件代码

import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
import { useState } from 'preact/hooks';

export function DatePickerA({ name, title, required }: { name: string, title: string, required?: boolean }) {
  const [startDate, setStartDate] = useState(new Date());
  
  return (
    <label className='my-5 flex flex-col gap-y-2' htmlFor={name}>
      <span className={`text-dark-blue`}>{title}</span>
      <DatePicker selected={startDate} onChange={(date) => setStartDate(date!)} />
    </label>
  );
}