菜单内容显示问题

Question

我需要一些帮助。我创建了一个包含部分和课程的菜单；但部分标签重复。

我希望同一部分的所有课程都显示在一个部分标签上。

请看代码和截图。

<Menu

                            defaultSelectedKeys={[clicked]}
                            inlineCollapsed={collapsed}
                            style={{ height: "100vh", overflow: "scroll" }}
                            mode="inline"
                        >

                            {course.lessons.map((lesson, index) => (

                                <SubMenu
                                    title={lesson.section}>
                                    <ItemGroup
                                        key={index}>

                                        <Item
                                            onClick={() => setClicked(index)}
                                            key={index}
                                            icon={<Avatar>{index + 1}</Avatar>}
                                        >

                                            {lesson.title.substring(0, 30)}
                                            {" "}
                                            {completedLessons.includes(lesson._id) ? (
                                                <CheckCircleFilled
                                                    className="float-end text-primary ml-2"
                                                    style={{ marginTop: "13px" }}
                                                />
                                            ) : (
                                                <MinusCircleFilled
                                                    className="float-end text-danger ml-2"
                                                    style={{ marginTop: "13px" }}
                                                />
                                            )}
                                        </Item>

                                    </ItemGroup>
                                </SubMenu>
                            ))}
                        </Menu>

Screenshot of the Menu

Answer 1

您需要按部分对课程进行分组，然后您必须迭代该部分中的每个课程。

这是一个可能的解决方案：

// group lessons by section into an object {sectionName: [lesson1, lesson2]}
const lessonsBySection = course.lessons.reduce(function(obj, lesson) {
  (obj[lesson.section] = obj[lesson.section] || []).push(lesson);
  return obj;
}, {});

// get all the sections (sorted alphabetically)
const sections = Object.keys(lessonsBySection).sort();

return (
  <Menu ...>
    {sections.map((section, sectionIndex) => (
      <SubMenu key={section} title={section}>
        <ItemGroup>
          {lessonsBySection[section].map((lesson, lessonIndex) => (
            <Item 
              key={lesson._id}
              onClick={() => setClicked(
                courses.lessons.findIndex(l => l._id === lesson._id)
              )}                
              icon={<Avatar>{lessonIndex + 1}</Avatar>}
            >
            ...
            </Item>
          ))}
        </ItemGroup>
      </SubMenu>
    ))}
  </Menu>
)

菜单内容显示问题

Menu content display issue

javascript

reactjs

menu

antd

menuitem