在React中实现星级评定计数器

Question

我正在尝试在组件上添加启动评级作为优先级指示器。我已经有了设计以及它应该如何运行，但是我对React还是陌生的，不确定如何去做。

图片：

下面的代码是每个任务的概述。我有一个Stars组件，我将把它作为一个单独的组件实现。我不确定使用某种形式的Libary还是从头开始编写它会更好。我认为对于每个星星，我都会使用“真棒字体”。

到目前为止的代码：

    import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
  root: {
    flexGrow: 1,
    overflow: 'hidden',
    padding: theme.spacing(0, 3),
  },
  paper: {
    maxWidth: 800,
    margin: `${theme.spacing(2)}px auto`,
    padding: theme.spacing(2),
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
});

function Tasks(props) {
  const { classes } = props;
  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm container>
            <Grid item xs container direction="column" spacing={2}>
              <Grid item xs>
              <div className="name-label">
              Name
              </div>
              <Typography variant="h6" gutterBottom>
              Order cofee beans
              </Typography>
              <div className="form-divider"></div>
                <Typography variant="body2" color="textSecondary">
                  Process of Description
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography variant="subtitle1">Workers Assigned</Typography>
              <Typography variant="h6" gutterBottom>
              0/25</Typography>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}

export default withStyles(styles)(Tasks);