相关疑难解决方法(0)

我正在使用 Next.js 和react-dates构建一个应用程序。

我有两个组件DateRangePicker组件和DayPickerRangeController组件。

当窗口的宽度大于1180px时，我想渲染DateRangePicker，如果尺寸小于这个，我想渲染DayPickerRangeController。

这是代码：

      windowSize > 1180 ?
           <DateRangePicker
             startDatePlaceholderText="Start"
             startDate={startDate}
             startDateId="startDate"
             onDatesChange={handleOnDateChange}
             endDate={endDate}
             endDateId="endDate"
             focusedInput={focus}
             transitionDuration={0}
             onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
               } else {
                 setFocus(focusedInput)
                }
               }}
                /> :
             <DayPickerRangeController
               isOutsideRange={day => isInclusivelyBeforeDay(day, moment().add(-1, 'days'))}
               startDate={startDate}
               onDatesChange={handleOnDateChange}
               endDate={endDate}
               focusedInput={focus}
               onFocusChange={(focusedInput) => {
               if (!focusedInput) {
                 setFocus("startDate")
                 } else {
                  setFocus(focusedInput)
                 }
               }}
              /> 
          }

我通常使用反应钩与窗口对象检测窗口屏幕宽度像这

但是我发现ssr的时候这种方式是不可用的，因为ssr渲染没有window对象。

无论ssr如何，是否有另一种方法可以安全地获得窗口大小？

在我的NextJS应用中，我似乎无法访问window

未处理的拒绝（ReferenceError）：未定义窗口

componentWillMount() {
    console.log('window.innerHeight', window.innerHeight);
}