如何在 React 中对 HTML 标签进行有条件的分组

Question

我在这样的循环中进行模板渲染

{
    category.menuIds.map((menuId, idx) => (
        <TemplateMenu
            index={idx}
            key={menuId}
            menu={this.props.menus[menuId]}
            menuLayout={category.menu_layout}
        />
    ));
}

它会呈现<div> 的列表，如下所示：

<div id="m0" class="Menu">...</div>
<div id="m1" class="Menu">...</div>
<div id="m2" class="Menu">...</div>
<div id="m3" class="Menu">...</div>
<div id="m4" class="Menu">...</div>
<div id="m5" class="Menu">...</div>
<div id="m6" class="Menu">...</div>
<div id="m7" class="Menu">...</div>
<div id="m8" class="Menu">...</div>
<div id="m9" class="Menu">...</div>

我想在this.props.index % 5 !== 0 的条件下将每 4 个<div> 分组以获取下面的 HTML：

<div id="m0" class="Menu">...</div>
<div class="MenuRight">
    <div id="m1" class="Menu">...</div>
    <div id="m2" class="Menu">...</div>
    <div id="m3" class="Menu">...</div>
    <div id="m4" class="Menu">...</div>
</div>
<div id="m5" class="Menu">...</div>
<div class="MenuRight">
    <div id="m6" class="Menu">...</div>
    <div id="m7" class="Menu">...</div>
    <div id="m8" class="Menu">...</div>
    <div id="m9" class="Menu">...</div>
</div>

任何帮助将不胜感激。

[编辑]

index 没关系。它可以与现在相同或相对于该组。为了更清楚，我只是在示例代码中描述了它。

在this.props.index % 5 === 0 条件下，元素<div class="Menu"> 将是独立的，否则其他元素将与<div class="MenuRight"> 分组。

Answer 1

您可以将categories.menuIds 数组缩减为类似于上述结构的二维数组。例如。 [[0], [1, 2, 3, 4], [5], [6, 7, 8, 9]...]。现在偶数索引包含 MenuItem [0]，奇数索引包含 MenuRight [1, 2, 3, 4]。现在我们可以使用Array.map() 有条件地渲染它。

工作示例： Demo Link

首先减少categories.menuIds数组

const menuIds = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];

const transformed = menuIds.reduce((acc, curr, idx) => {
  if (idx % 5 === 0) {
    const i = Math.floor(idx / 5) * 2;
    acc[i] = [curr];
  } else {
    const parentIdx = Math.floor(idx / 5) * 2 + 1;
    acc[parentIdx] = acc[parentIdx] || [];
    acc[parentIdx] = [...acc[parentIdx], curr];
  }

  return acc;
}, []);

console.log(transformed);

使用Array.map() 在React 中渲染它

<div className="App">
  {transformed.map((item, idx) => {
    return (
      <>
        {idx % 2 === 0 && (
          <div key={idx} className="Menu">
            {item}
          </div>
        )}
        {idx % 2 === 1 && (
          <div key={idx} className="MenuRight">
            {item.map((menuRight, i) => (
              <div key={i} className="Menu">
                {menuRight}
              </div>
            ))}
          </div>
        )}
      </>
    );
  })}
</div>

Answer 2

在标签已经映射到TemplateMenu 的平面列表之后重新组合标签会很复杂，因为每个元素都不知道根据其父级逻辑的位置。

为了解决您的问题，我会在将元素映射到最终元素之前对它们进行分组，然后将它们呈现为单个 TemplateMenu 或分组 MenuRight。

例如，这是我认为对它们进行分组的最快方法，但当然还有许多其他算法您可能更喜欢：

const groupedIds = menuIds.reduce((groups: any[], id: any, index: number) => {
    if (index % 5 === 0) {
      groups[Math.floor(index / 5) * 2] = [id];
    } else {
      const groupIndex = Math.floor(index / 5) * 2 + 1;
      if (groups[groupIndex]) {
        groups[groupIndex].push(id);
      } else {
        groups[groupIndex] = [id];
      }
    }

    return groups;
  }, []);

这将产生一个像[[0],[1,2,3,4],[5],[6,7...]...] 这样的ID 数组。然后您可以使用这些组以不同的方式呈现它们。

这是一个工作示例，其中的问题源自您 (also on CodeSandbox)：

function TemplateMenu({ index, id }: { index: number; id: any }) {
  return (
    <div id={`m${index}`} className="Menu">
      {id}
    </div>
  );
}

/*export default*/ function App() {
  const menuIds = ["single 1", 2, 3, 4, 5, "single 2", "a", "b"];

  const groupedIds = menuIds.reduce((groups: any[], id: any, index: number) => {
    if (index % 5 === 0) {
      groups[Math.floor(index / 5) * 2] = [id];
    } else {
      const groupIndex = Math.floor(index / 5) * 2 + 1;
      if (groups[groupIndex]) {
        groups[groupIndex].push(id);
      } else {
        groups[groupIndex] = [id];
      }
    }

    return groups;
  }, []);

  return (
    <div className="App">
      {/*{menuIds.map((id, idx) => {
        return <TemplateMenu key={id} index={idx} id={id} />;
      })}*/}
      {groupedIds.map((group, idx) => {
        if (group.length === 1) {
          return <TemplateMenu key={group[0]} index={idx} id={group[0]} />;
        } else {
          return (
            <div className="MenuRight">
              {group.map((id, idx) => {
                return <TemplateMenu key={id} index={idx} id={id} />;
              })}
            </div>
          );
        }
      })}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

.Menu {
    outline: 1px solid red;
}

.MenuRight {
    outline: 1px solid blue;
    padding: 4px;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

Answer 3

你可以用一个简单的循环来做到这一点，这对我来说是迄今为止最清晰的方法；见 cmets：

const {menuIds} = category;
const elements = [];
// Include every 5th element directly, including the 0th one;
// group the (up to) four following it
let index = 0;
while (index < menuIds.length) {
    // Use this entry directly, note we increment index after using it
    // in the `TemplateMenu`
    const {menuId} = menuIds[index];
    elements.push(
        <TemplateMenu
            index={index++}
            key={menuId}
            menu={this.props.menus[menuId]}
            menuLayout={category.menu_layout}
        />
    );

    // Follow it with up to four in a `<div class="MenuRight">`
    const following = menuIds.slice(index, index + 4);
    if (following.length) {
        // Note we increment `index` as we go
        elements.push(
            <div className="MenuRight">
                {following.map(({menuId}) => (
                    <TemplateMenu
                        index={index++}
                        key={menuId}
                        menu={this.props.menus[menuId]}
                        menuLayout={category.menu_layout}
                    />
                ))}
            </div>
        );
    }
}

// ...use {elements}...

现场示例：

const {useState} = React;

const TemplateMenu = ({index, menu, menuLayout}) => <div className="TemplateMenu">{menu}</div>;

class Example extends React.Component {
    render() {
        const category = {
            menuIds: [
                {menuId: 0},
                {menuId: 1},
                {menuId: 2},
                {menuId: 3},
                {menuId: 4},
                {menuId: 5},
                {menuId: 6},
                {menuId: 7},
                {menuId: 8},
                {menuId: 9},
            ],
            menu_layout: "example",
        };
        const {menuIds} = category;
        const elements = [];
        // Include every 5th element directly, including the 0th one;
        // group the (up to) four following it
        let index = 0;
        while (index < menuIds.length) {
            // Use this entry directly, note we increment index after using it
            // in the `TemplateMenu`
            const {menuId} = menuIds[index];
            elements.push(
                <TemplateMenu
                    index={index++}
                    key={menuId}
                    menu={this.props.menus[menuId]}
                    menuLayout={category.menu_layout}
                />
            );

            // Follow it with up to four in a `<div class="MenuRight">`
            const following = menuIds.slice(index, index + 4);
            if (following.length) {
                // Note we increment `index` as we go
                elements.push(
                    <div className="MenuRight">
                        {following.map(({menuId}) => (
                            <TemplateMenu
                                index={index++}
                                key={menuId}
                                menu={this.props.menus[menuId]}
                                menuLayout={category.menu_layout}
                            />
                        ))}
                    </div>
                );
            }
        }

        // ...use {elements}...
        return <div>{elements}</div>;
    }
};

const menus = [
    "Menu 0",
    "Menu 1",
    "Menu 2",
    "Menu 3",
    "Menu 4",
    "Menu 5",
    "Menu 6",
    "Menu 7",
    "Menu 8",
    "Menu 9",
];
ReactDOM.render(
    <Example menus={menus} />,
    document.getElementById("root")
);

.TemplateMenu {
    border: 1px solid green;
    margin: 4px;
}
.MenuRight {
    margin: 4px;
    padding: 4px;
    border: 1px solid red;
}

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>