如何在时间轴（Material-UI）中使用 for 循环显示数据 - React答案

【问题标题】：How to display data using a for loop in Timeline (Material-UI) - React如何在时间轴（Material-UI）中使用 for 循环显示数据 - React
【发布时间】：2021-04-07 22:14:47
【问题描述】：

我有一个 json 格式的数据，如下所示：

[
    {
        "module_id": 2,
        "module_type": "Instructional",
        "module_name": "Introduction and Course Overview",
        "duration": 30,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    },
    {
        "module_id": 1,
        "module_type": "Instructional",
        "module_name": "Quiz",
        "duration": 20,
        "course": {
            "course_id": 1,
            "course_name": "AWS"
        }
    }
]

现在，我在 react 中有以下代码，我想在时间轴上渲染它：时间线代码（材质 - 用户界面）

return(
    <Timeline align="alternate">
      <TimelineItem>
      <TimelineSeparator>
      <TimelineDot color="primary">
        <LaptopMacIcon />
      </TimelineDot>
      <TimelineConnector />
    </TimelineSeparator>
    <TimelineContent>
      <Paper elevation={3} className={classes.paper}>
        <Typography variant="h6" component="h1">
          **Here, I want to display the module_name i.e Introduction and Course Overview and Quiz**
        </Typography>
      </Paper>
    </TimelineContent>
  </TimelineItem>
  <TimelineItem>
)

请帮忙看看如何做同样的事情，我希望时间轴上有类似这样的笔记本电脑图标

                                Introduction and Course Overview
                               |
                               |
                            Quiz

提前谢谢你:)

【问题讨论】：

您是否尝试过映射您的 json 数据？并且还要先将你的 JSON 数据转换成 js 对象。

标签： json reactjs rest material-ui

【解决方案1】：

您必须将您的 json 映射到 <TimelineItem />，您可以通过编写如下函数来做到这一点

const getModules = () => {
    return res.map((r, i) => {
      const className = i % 2 === 0 ? "custom-even-class" : "custom-odd-class";
      return (
        <TimelineItem classes={{ alignAlternate: className }} key={r.module_id}>
          <TimelineSeparator>
            <TimelineDot />
            <TimelineConnector />
          </TimelineSeparator>
          <TimelineContent>{r.module_name}</TimelineContent>
        </TimelineItem>
      );
    });
  };

此函数将返回<TimelineItem /> 列表并进行渲染，您可以在渲染函数中调用此函数，如下所示

return (
    <Timeline align="alternate">
      <TimelineItem>
        <TimelineSeparator>
          <TimelineDot>
            <LaptopMacIcon />
          </TimelineDot>
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent></TimelineContent>
      </TimelineItem>

      {getModules()}
    </Timeline>
  );

之后你会看到这样的时间线

现在正如你提到的，你希望你的时间线看起来像这样，开始项目作为笔记本电脑图标，我们必须使用备用时间线，默认情况下，所有偶数项目将显示在左侧，奇数项目将显示在右侧时间轴，如上图所示。

                            Introduction and Course Overview
                           |
                           |
                        Quiz

所以要根据您的问题对其进行修改，我实施了一种修改默认 CSS 的 hacky 方式并使其如下所示

你可以在这里查看最终代码https://codesandbox.io/s/recursing-fire-nbpmu?file=/src/styles.css

【讨论】：