Teams应用中实现react-datepicker组件遇报错求助

DevOps 小满

2026-8-12

修复Teams应用中react-datepicker组件的错误

核心问题及修复步骤

未导入React Hook：TestScreen组件使用了useState但未从React中导入，导致"useState未定义"错误。
初始值类型不匹配：react-datepicker的selected属性要求接收Date类型或null，而非空字符串，会引发类型错误。

修复后的TestScreen代码

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";

export default function TestScreen() {
    // 初始值设为null，符合组件类型要求
    const [selectedDate, setSelectedDate] = useState(null);    
    
    return(
        <div>
            <h1>TEST SCREEN</h1>
            <div>
                <DatePicker 
                    selected={selectedDate}
                    onChange={date => setSelectedDate(date)}
                    // 适配Bootstrap/Fluent UI样式，避免显示异常
                    className="form-control"
                />
            </div>
        </div>            
    )
}

额外注意事项

依赖安装验证：确保已安装必要依赖，执行以下命令：
```
npm install react-datepicker react@>=16.8.0 react-dom@>=16.8.0
```

样式冲突处理：如果遇到Fluent UI与react-datepicker的样式冲突，可自定义CSS覆盖默认样式，例如适配Teams主题：

.react-datepicker {
    border: 1px solid var(--teams-theme-border-color);
    background-color: var(--teams-theme-background-color);
}
.react-datepicker-header {
    background-color: var(--teams-theme-primary-color);
}

推荐替代方案：为了更好适配Teams环境，建议使用Fluent UI Northstar自带的DatePicker组件，无需额外安装第三方库，样式完全兼容Teams主题：
```
import { DatePicker } from "@fluentui/react-northstar";
```