javascript - 从 JSON 对象生成材质时间线

Question

我有这个由 BE 生成的 Json 对象：

{
  "step1": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 1",
    "description": "description 1"
  },
  "step2": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 2",
    "description": "description 2"
  },
  "step3": {
    "approved": true,
    "approvalTime": "10-11-2021",
    "title": "title 3",
    "description": "description 3"
  }
}

材料时间表：

                     <Timeline align="alternate">
                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary"> // get color form Json
                                    9:30 am  // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot>
                                    <LibraryBooks />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 1 // get title from JSON
                                    </Typography>
                                    <Typography> // get description from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    11:00 am // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <PeopleAlt />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 2 // get title from JSON
                                    </Typography>
                                    <Typography>description 2 // get value from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    10:00 am // get value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <BusinessCenter />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        title 3 // get values from JSON
                                    </Typography>
                                    <Typography>description 3 // get value from JSON</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                    </Timeline>

是否可以设置来自 JSON 对象的所有值并Paper使用 Typescript 基于 JSON 值设置组件颜色？当我必须"approved": true为背景设置绿色时Paper。

标签： javascriptreactjstypescriptmaterial-uireact-typescript

Answer 1

是的，你可以，而且它比你想象的要简单。实现这一目标有两个主要选择：

1. 传播道具 - 意味着将您需要的值作为道具传递给将时间线作为其子元素之一的组件：

<ComponentWithTimeline steps={<stepsJsonVariableName>}/>

时间线组件的样式部分

classesTimeline:{
    ...classesTimeline
    greenPaper:
    {
        ...classesTimeline.paper,
        backgroundColor: "green",
    }
}

组件的时间线部分

                     <Timeline align="alternate">
                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary"> // get color form Json
                                    9:30 am  // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot>
                                    <LibraryBooks />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={(props.steps.step1.approved) ? classesTimeline.greenPaper : classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        {props.steps.step1.title}
                                    </Typography>
                                    <Typography> {props.steps.step1.description}</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    11:00 am // get this value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <PeopleAlt />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={(props.steps.step.approved) ? classesTimeline.greenPaper : classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        {props.steps.step2.title}
                                    </Typography>
                                    <Typography>{props.steps.step2.description}</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                        <TimelineItem>
                            <TimelineOppositeContent>
                                <Typography variant="body2" color="textSecondary">
                                    10:00 am // get value from JSON
                                </Typography>
                            </TimelineOppositeContent>
                            <TimelineSeparator>
                                <TimelineDot color="primary">
                                    <BusinessCenter />
                                </TimelineDot>
                                <TimelineConnector />
                            </TimelineSeparator>
                            <TimelineContent>
                                <Paper elevation={3} className={(props.steps.step3.approved) ? classesTimeline.greenPaper : classesTimeline.paper}>
                                    <Typography variant="h6" component="h1">
                                        {props.steps}
                                    </Typography>
                                    <Typography>{props.steps.step3.description}
</Typography>
                                </Paper>
                            </TimelineContent>
                        </TimelineItem>

                    </Timeline>

2. 使用反应上下文使 json 对象的值可用于所有子对象（文档）

基本示例：

// Context lets us pass a value deep into the component tree
// without explicitly threading it through every component.
// Create a context for the current theme (with "light" as the default).
const ThemeContext = React.createContext('light');

class App extends React.Component {
  render() {
    // Use a Provider to pass the current theme to the tree below.
    // Any component can read it, no matter how deep it is.
    // In this example, we're passing "dark" as the current value.
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// A component in the middle doesn't have to
// pass the theme down explicitly anymore.
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // Assign a contextType to read the current theme context.
  // React will find the closest theme Provider above and use its value.
  // In this example, the current theme is "dark".
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}