React遍历map渲染条目时如何仅展示一个控制所有内容的年份滑块

我们只需要做3处核心修改，就能在保留Slices遍历渲染逻辑的前提下实现需求：

1. 调整全局日期状态结构 #

原来的状态是按section存储多个年份，现在直接改为存储单个全局年份即可：

const DatesProvider = ({ children }) => {
  // 改为单个年份状态，不用按section区分
  const [currentYear, setCurrentYear] = React.useState(2021);
  return (
    <DateContext.Provider value={{ currentYear, setCurrentYear }}>
      {children}
    </DateContext.Provider>
  );
};

2. 遍历渲染时过滤多余的DatePicker #

加一个标记位，只渲染第一个DatePicker，后续的DatePicker全部跳过不渲染，完全保留原有的Slices遍历逻辑：

export default function App() {
  // 标记是否已经渲染过日期选择器
  let hasRenderedPicker = false;
  return (
    <div className="App">
      <DatesProvider>
        {data.map((item, index) => {
          const Slice = slices[item.type];
          // 遇到DatePicker类型，已经渲染过的话直接跳过
          if (item.type === 'DatePicker') {
            if (hasRenderedPicker) return null;
            hasRenderedPicker = true;
          }
          return <Slice section={item.section} key={index} />;
        })}
      </DatesProvider>
    </div>
  );
}

3. 简化DatePicker和Item的逻辑，直接使用全局年份 #

const DatePicker = () => {
  const { currentYear, setCurrentYear } = React.useContext(DateContext);

  const handlePlus = () => setCurrentYear(prev => prev + 1);
  const handleMinus = () => setCurrentYear(prev => prev - 1);

  return (
    <div style={{ marginTop: 30 }}>
      <button onClick={handleMinus}>-</button>
      <span>{currentYear}</span>
      <button onClick={handlePlus}>+</button>
    </div>
  );
};

const Item = ({ section }) => {
  const { currentYear } = React.useContext(DateContext);
  return (
    <div>
      Section: {section} | Year: {currentYear}
    </div>
  );
};

如果后续需要恢复多滑块独立控制的能力，只需要把状态改回按section存储、移除遍历的过滤逻辑即可，整体兼容成本很低。

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