我正在尝试在团队应用程序中实现 DatePicker

Question

您好，我正在创建 Teams 应用程序，但在我的其中一个屏幕上实现 DatePicker 时遇到了问题。 我的基本测试屏幕：

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

export default function TestScreen() {
    let [selectedDate, setSelectedDate] = useState("");    
    
    return(
            <div>
                <h1>TEST SCREEN</h1>
                <div>
                    <DatePicker 
                    selected={selectedDate}
                    onChange={date => setSelectedDate(date)}
                    />
                </div>
            </div>            
        )
}

选项卡组件：

import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "@fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "@microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";

export default function App() {
  const { theme } = useTeams({})[0];
  return (
    <Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
      <Router>
          <TestScreen />
      </Router>
    </Provider>
  );
}

[我得到的错误][1] [1]: https://i.stack.imgur.com/Sc7cX.png

Answer 1

对于那些想知道的人，我解决了我的问题，用一个简单的替换了。 不是我一开始想使用的解决方案，但至少它工作正常。 可能是 Teams 工具包、React 和一些包之间的兼容性问题。

Answer 2

我看到您没有在文件中导入 useState。 还将当前日期添加为 selectedDate state 的默认值。试试这个

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

export default function TestScreen() {
  let [selectedDate, setSelectedDate] = useState(new Date());    

  return(
        <div>
            <h1>TEST SCREEN</h1>
            <div>
                <DatePicker 
                selected={selectedDate}
                onChange={date => setSelectedDate(date)}
                />
            </div>
        </div>            
    )
}

如果您仍然无法使用它，请检查您是否使用旧版本的 React。 由于 React 16.8.0 或更高版本支持 hooks。