代码之家 › 专栏 › 技术社区 › JarochoEngineer

跳过某些元素映射通过对象

slice jsx reactjs javascript

JarochoEngineer · 技术社区 · 1 年前

想知道如何在JSX中的任何位置显示分隔符?例如,我有以下列表,当单击项目时会显示文本:

代码如下:

<Accordion>
  {items.map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
</Accordion>

有这样一个对象来声明列表的内容:

const items = [
    { label: "One", content: "lorem ipsum for more, see https://one.com" },
    { label: "Two", content: "lorem ipsum for more, see https://two.com" },
    {
      label: "Three",
      content: "lorem ipsum for more, see https://three.com",
    },
  ];

现在,我想在标签“Two”后面添加一个分隔符,得到这样的内容:

如果我们尝试以下方式,我会激活索引0中的元素和索引2中的元素:

<Accordion>
  {items.slice(0, 2).map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
  <hr />
  {items.slice(2).map((item, index) => (
    <AccordionItem key={item.id} item={item} index={index} />
  ))}
</Accordion>

然后,得到这个错误的结果:

为什么会这样?因为我的Accordion对象如下:

import { useState, createContext } from "react";

export const AccordionContext = createContext({
  activeItemIndex: 0,
  setActiveItemIndex: () => 0,
});

export const Accordion = (props) => {
  const [activeItemIndex, setActiveItemIndex] = useState(0);

  return (
    <AccordionContext.Provider value={{ activeItemIndex, setActiveItemIndex }}>
      <ul>{props.children}</ul>
    </AccordionContext.Provider>
  );
};

一开始 activeItemIndex 是0,所以当应用slice(2)时,第一个元素也是索引0(然而该元素处于索引2)。

我怎样才能在列表中的第二个元素后面找到行?

谢谢

2 回复 | 直到 1 年前

X8inez 1 年前

可以使用数组的索引来有条件地显示分隔符。


 <Accordion>
   {items.map((item, index) => (
      <React.Fragment key={item.id}>
        <AccordionItem item={item} index={index} />
        {index === 1 && <hr />}
      </React.Fragment>
    ))}
  </Accordion>

mandy8055 1 年前

可以根据当前索引有条件地渲染分隔符。

...
return (
    <Accordion>
      {items.map((item, index) => (
        <React.Fragment key={item.id}>
          <AccordionItem item={item} index={index} />
          {index === 1 && <hr />}
        </React.Fragment>
      ))}
    </Accordion>
  );

Demo here

任何索引值的动态解决方案:

因此,如果您看到上述解决方案适用于特定的索引,即。 1 (指第二个 <AccordionItem /> ). 要使分隔符位置动态,可以将道具传递给 Accordion 组件,指定分隔符索引,然后可以利用这些索引有条件地呈现分隔符。

export const Accordion = ({ separators, children }) => {
  const [activeItemIndex, setActiveItemIndex] = useState(0);

  return (
    <AccordionContext.Provider value={{ activeItemIndex, setActiveItemIndex }}>
      <ul>{children(separators)}</ul>
    </AccordionContext.Provider>
  );
};
// To use
 // const separatorIndices = [2]; // or any dynamic index which you want to provide.
  const separatorIndex = 1; // or this whichever suits your needs

  return (
    <Accordion>
      {items.map((item, index) => (
        <React.Fragment key={item.id}>
          <AccordionItem item={item} index={index} />
          {/* {separatorIndices.includes(index) && <hr />} */}
          {index === separatorIndex && <hr />}
        </React.Fragment>
      ))}
    </Accordion>
  );

Demo here