时间戳

首页 > 解决方案 > 在 React 中返回地图项时显示一次控制所有内容的滑块

reactjs - 在 React 中返回地图项时显示一次控制所有内容的滑块

问题描述

我返回了一些 CMS 内容，我的目标是根据用户通过单击减号/加号箭头选择的年份来控制内容的年份滑块。

这是我的代码：

import "./styles.css";

import React from "react";

export default function App() {
  return (
    <div className="App">
      <DatesProvider>
        {data.map((item, index) => {
          const Slice = slices[item.type];
          return <Slice section={item.section} key={index} />;
        })}
      </DatesProvider>
    </div>
  );
}

const DateContext = React.createContext({});

const DatesProvider = ({ children }) => {
  const [dates, setDates] = React.useState({});
  return (
    <DateContext.Provider value={{ dates, setDates }}>
      {children}
    </DateContext.Provider>
  );
};

const DatePicker = ({ section }) => {
  const { dates, setDates } = React.useContext(DateContext);

  React.useEffect(() => {
    // Set initial date
    setDates((prevDates) => {
      prevDates[section] = 2021;
      return { ...prevDates };
    });
    // Clean up on dismount
    return () => {
      setDates((prevDates) => {
        delete prevDates[section];
        return { ...prevDates };
      });
    };
  }, []);

  const handlePlus = () => {
    setDates((prevDates) => ({
      ...prevDates,
      [section]: prevDates[section] + 1
    }));
  };

  const handleMinus = () => {
    setDates((prevDates) => ({
      ...prevDates,
      [section]: prevDates[section] - 1
    }));
  };

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

const Item = ({ section }) => {
  const { dates } = React.useContext(DateContext);

  return (
    <div>
      Section: {section} | Year: {dates[section]}
    </div>
  );
};

const data = [
  { type: "DatePicker", section: "foo" },
  { type: "Item", section: "foo" },
  { type: "Item", section: "foo" },
  { type: "DatePicker", section: "bar" },
  { type: "Item", section: "bar" },
  { type: "Item", section: "bar" }
];

const slices = { DatePicker, Item };

结果目前是这样的：

在此处输入图像描述

正如你所知道的，它多次返回年份滑块，结构类似于：

<slider> - 2021 + </slider>
<section class= "container-of-all-items">
<all-items></all-items>
</section>
<slider> - 2021 + </slider>
<section class= "container-of-all-items">
<all-items></all-items>
</section>

我的目标是只有一年的滑块包装/控制整个内容项，而不是上面重复的滑块：

<slider> - 2021 + </slider>
<section class= "container-of-all-items">
<all-items></all-items>
</section>

知道如何通过维护地图来实现它Slices吗？

标签： reactjs

解决方案

我明白了，我花了一段时间才明白，你基本上想要一组 + 和 - 但项目列表。

然后在您的情况下，您的代码实际上简化了。

function Lists() {
  const { dates, setDates } = React.useContext(DateContext);
  const onClick = () => { setDates(...) }

  return (
    <>
      <div onClick={onClick}>+</div>
      <>
        {dates.map((item, index) => {
          return <Slice section={item.section} key={index} />
        })}
      </>
      <div>-</div>
    </div>
  );
}

然后更改您的应用程序。

export default function App() {
  return (
    <div className="App">
      <DatesProvider value={...}>
         <Lists />
      </DatesProvider>
    </div>
  );
}

实际上，您可能根本不需要上下文，因为逻辑已被提升到父级。但这取决于你。

推荐阅读