React中如何在React-Day-Picker选中周下方插入自定义时段组件

Portal完全符合你的需求，具体实现步骤如下：

1. 先在组件内引入依赖并定义两个状态，分别存储选中的日期、Portal挂载的目标DOM节点：

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';
// 你的独立时段选择组件
import TimeSlot from './TimeSlot';

const [selectedDay, setSelectedDay] = useState(null);
const [portalRoot, setPortalRoot] = useState(null);

2. 修改日期点击事件逻辑，每次点击时先清理之前插入的DOM节点，避免多个时段选择栏同时出现，再为当前选中周创建Portal挂载容器：

const handleDayClick = (day, { selected }, e) => {
  // 清理上一次插入的容器
  if (portalRoot) {
    portalRoot.remove();
    setPortalRoot(null);
  }
  // 取消选中的情况直接返回
  if (selected) {
    setSelectedDay(null);
    return;
  }
  // 定位当前点击日期所属的周节点
  const weekNode = e.target.closest('.DayPicker-Week');
  // 创建新的挂载容器插入到周节点后方
  const newRoot = document.createElement('div');
  weekNode.after(newRoot);
  // 更新状态
  setSelectedDay(day);
  setPortalRoot(newRoot);
};

3. 在组件的JSX中添加Portal渲染逻辑，将时段组件渲染到指定的DOM节点中：

function App() {
  // 上述状态和事件逻辑
  return (
    <div className="app">
      <DayPicker 
        selectedDays={selectedDay}
        onDayClick={handleDayClick}
      />
      {/* 渲染Portal */}
      {portalRoot && selectedDay && ReactDOM.createPortal(
        <TimeSlot date={selectedDay} />,
        portalRoot
      )}
    </div>
  );
}

4. 新增卸载清理逻辑，避免内存泄漏：

useEffect(() => {
  return () => {
    if (portalRoot) {
      portalRoot.remove();
    }
  };
}, [portalRoot]);

这种实现方式不需要改动React-Day-Picker的内部逻辑，你的时段组件也可以保持完全独立，所有状态和交互都遵循React的生命周期管理。

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