如何将它变成一类？

Question

从我9年级MySpace以来，基本上所有前端都是全新的，所以请耐心等待。

我有一些在CourseDetail.js中产生的代码。它从services / courseServices.js获取JSON数据。

现在，我想为“学校”而不是“课程”生成几乎相同的代码。输出将看起来相同，除了它将从getSchoolDetail（services / schoolServices）获取JSON，并且CourseDetail函数将返回不同的HTML（尽管非常相似。只是不同的字段和不同数量的字段。）

对于不同的JSON集，我将需要执行大约20次。如何将其转换为有效的代码？我正在考虑将其变成一堂课，但是我在如何做出反应方面迷失了一些。

感谢您的时间！ PS，此代码的任何其他技巧也很可爱。

这是CourseDetail.js页面：

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import {
  Link as StyledLink, Typography, withStyles,
} from '@material-ui/core';
import PropTypes from 'prop-types';

import { getCourseDetail } from 'services/courseServices';

const DetailBase = ({ k, val, classes: { lDiv, rDiv, root } }) => (
    <Typography color="primary" className={root}>
        <div className={lDiv}>{k}:</div>
        <div className={rDiv}>{val}</div>
    </Typography>
);

DetailBase.propTypes = {
  k: PropTypes.string,
  val: PropTypes.string,
  classes: PropTypes.object,
};

const DLinkBase = ({
  k, val, link, classes: { lDiv, rDiv, root },
}) => (
    <Typography color="primary" className={root}>
        <div className={lDiv}>{k}:</div>
        <div className={rDiv}><Link to={link}><StyledLink>{val}</StyledLink></Link></div>
    </Typography>
);

DLinkBase.propTypes = {
  k: PropTypes.string,
  val: PropTypes.string,
  link: PropTypes.string,
  classes: PropTypes.object,
};

const dStyles = theme => ({
  lDiv: {
    fontWeight: 800,
    minWidth: 120,
    marginRight: theme.spacing.unit * 4,
    textAlign: 'right',
  },
  rDiv: {
    textAlign: 'left',
  },
  root: {
    display: 'flex',
    flexDirection: 'row',
    marginBottom: theme.spacing.unit * 1,
  },
});

const DetailItem = withStyles(dStyles)(DetailBase);
const DetailLink = withStyles(dStyles)(DLinkBase);

function CourseDetail(props) {
  const [courseDetail, setCourseDetail] = useState({});
  const [loading, setLoading] = useState(true);
  const { classes: { header }, match: { params } } = props;
  const courseIdParam = params;

  useEffect(() => {
    console.log('useEffect ran in CourseDetail', courseIdParam);
    getCourseDetail(courseIdParam).then((s) => {
      setCourseDetail(s);
      setLoading(false);
    });
  }, []);

  if (loading) {
    return (
        <div>
            <h1>Course Detail</h1>
            <h2>Loading...</h2>
        </div>
    );
  }

  const {
    courseId,
    schoolName,
    schoolId,
    courseName,
    courseCode,
    courseSubject,
  } = courseDetail;

  return (
      <div>
          <Typography className={header} component="h1" variant="h4">{courseName}</Typography>
          <DetailItem k="Course Code" val={courseCode} />
          <DetailItem k="Subject" val={courseSubject} />
          <DetailLink k="School" val={schoolName} link={`/school/${schoolId}`} />
          <DetailLink k="Grades" val="Click Here" link={`/course/grade/${courseId}`} />
      </div>
  );
}


const styles = theme => ({
  header: {
    color: theme.palette.primary.main,
    marginBottom: theme.spacing.unit * 1,
    textTransform: 'uppercase',
  },
  striped: {
    background: theme.grays.g0,
  },
  tHead: {
    fontSize: 16,
    color: theme.palette.primary.main,
    textTransform: 'uppercase',
  },
  tRow: {
    height: 32,
  },
});

CourseDetail.propTypes = {
  classes: PropTypes.object,
  match: PropTypes.object,
};

export default withStyles(styles)(CourseDetail);

这是services / courseServices.js文件：

export const getCourses = () => fetch('/mockdata/courses.json')
  .then(result => result.json());

export const getCourseDetail = () => fetch('/mockdata/courseDetail.json')
  .then(result => result.json());

export const getCourseGradeDetail = () => fetch('/mockdata/courseGradeDetail.json')
  .then(result => result.json());

export const getCourseAttendanceDetail = () => fetch('/mockdata/courseAttendanceDetail.json')
  .then(result => result.json());

export const getSchoolBehaviorDetail = () => fetch('/mockdata/courseAttendanceDetail.json')
  .then(result => result.json());