React StrictMode下react-advanced-datetimerange-picker警告修复求助

问题场景 #

在React项目中使用react-advanced-datetimerange-picker实现日期时间范围选择功能，项目index.js已启用<React.StrictMode>，但使用该库时出现两个警告，需在保留StrictMode的前提下解决这些问题。

相关代码 #

return (
  <DateTimeRangeContainer
    ranges={ranges}
    autoApply={true}
    start={time.start}
    end={time.end}
    local={local}
    applyCallback={handleDateRangeChange}
    forceMobileMode
    years={[2022, 2025]}
    style={styleRange}
  >
  </DateTimeRangeContainer>
);

警告内容 #

警告1 #

react-dom.development.js:86 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: FormControl.

警告2 #

react-dom.development.js:86 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DateTimeRangeContainer which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

解决方案 #

• 升级库版本
  先检查react-advanced-datetimerange-picker的最新版本，确认是否已修复StrictMode兼容问题。若存在兼容新版本，执行npm update react-advanced-datetimerange-picker或yarn upgrade react-advanced-datetimerange-picker完成更新。

• 封装组件局部禁用StrictMode
  如果库未更新修复该问题，可创建一个封装组件，在组件内部临时禁用StrictMode，全局StrictMode保持启用：

  import { DateTimeRangeContainer } from 'react-advanced-datetimerange-picker';
  import React from 'react';
  
  const SafeDateTimeRangeContainer = (props) => {
    return (
      <React.StrictMode={false}>
        <DateTimeRangeContainer {...props} />
      </React.StrictMode>
    );
  };
  
  export default SafeDateTimeRangeContainer;
  

  后续项目中直接使用SafeDateTimeRangeContainer替代原DateTimeRangeContainer组件即可。

• 替换为StrictMode兼容库
  若上述方案均无效，建议替换为官方支持StrictMode的同类库，例如react-date-range或@mui/x-date-pickers-pro，这类库不会触发此类StrictMode警告。

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