React Calendar在父组件中无法正常工作的原因排查求助

问题根源 #

核心问题是组件卸载导致状态丢失：

• 在MyCalendar中选择日期后，父组件DatePicker的handleChange会调用setIsSelectingDates(false)，直接让MyCalendar从DOM中卸载
• 下次点击输入框打开日历（setIsSelectingDates(true)），MyCalendar会重新挂载，此时内部useState的初始值是null，所以selectedValue被重置，无法高亮之前选中的日期

解决方案（保留MyCalendar自身状态） #

不要通过条件渲染卸载/挂载MyCalendar，而是用CSS控制显示与隐藏，这样组件实例会一直存在，内部状态得以保留。

修改DatePicker组件的渲染逻辑：

export const DatePicker: React.FC<PropsDatePicker> = ({
  selectRange = false,
}) => {
  const [isSelectingDates, setIsSelectingDates] = useState(false);
  const [value, setValue] = useState<Value>(null);

  const handleChange = (value: Value) => {
    setValue(value);

    if (Array.isArray(value)) {
      // 选择日期范围时，需等待两个日期都选完再关闭
      if (value[0] && value[1]) setIsSelectingDates(false);
    } else {
      setIsSelectingDates(false);
    }
  };

  return (
    <>
      <div
        onClick={() => setIsSelectingDates(!isSelectingDates)}
      >
        {/* 优化日期显示格式 */}
        {value 
          ? Array.isArray(value) 
            ? `${value[0]?.toLocaleDateString()} 至 ${value[1]?.toLocaleDateString()}` 
            : value.toLocaleDateString()
          : '选择日期'}
      </div>

      {/* 用CSS控制显示隐藏，而非卸载组件 */}
      <div style={{ display: isSelectingDates ? 'block' : 'none' }}>
        <MyCalendar
          onDateSelect={handleChange}
          selectRange={selectRange}
        />
      </div>
    </>
  );
};

关键说明 #

• 组件卸载后，React会销毁其内部所有状态；而通过display: none隐藏组件，只是视觉上不可见，组件实例和状态都会被保留
• 这样修改后，MyCalendar的selectedValue状态会持续追踪选中的日期，打开日历后能正确高亮，同时完全保留了组件自身的状态管理逻辑，无需从父组件接收value属性

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