Question

我创建一个功能组件和一个类组件。在render方法中，我想将功能组件称为组件prop。

我的代码：

function projectList(props) {
    const { classes } = props
    return (
      <div>
        {projects.slice(0, 5).map(project => (
          <Card className={classes.card} key={project.id}>
            <CardHeader
              classes={{ title: classes.h6, subheader:             
              classes.subtitle1 }}
              title={project.projectName}
              subheader={project.h5}
            />
            <CardActionArea>
              <CardMedia
                component="img"
                alt={project.h5}
                className={classes.media}
                image={project.img}
              />
              <CardContent>
                <Typography paragraph>
                  {project.paragraph}
                </Typography>
              </CardContent>
            </CardActionArea>
            <CardActions className={props.classes.actions}>
              <Button
                className={props.classes.projectButton}
                component={Link}
                to={project.pathname}
                size="medium"
                color="secondary"
              >
                Project Details
              </Button>
            </CardActions>
          </Card>
        ))}
      </div>
    )
  }

  projectList.propTypes = {
      classes: PropTypes.any.isRequired, // eslint-disable-line
  }

  class Projects extends Component {
    static propTypes = {
      classes: PropTypes.any.isRequired, // eslint-disable-line
    }

    render() {
      const { classes } = this.props
      return (
        <Grid container className={classes.projectPage} 
          direction="row">
          <Grid item xs />
          <Grid item>
            <Grid container alignItems="center" direction="column">
              {/* Title */}
              <Grid item>
                <Typography className={classes.h5} variant="h5">Latest 
                Projects</Typography>
              </Grid>
              <Grid item xs={12} sm={6} component={projectList} />
              <Grid item className={classes.nextButton}>
                <Button
                  className={classes.contained}
                  size="medium"
                  variant="contained"
                  onClick={this.handleShowMore}
                >
                  See More
                </Button>
              </Grid>
            </Grid>
          </Grid>
          <Grid item xs />
        </Grid>
      )
    }
  }

  export default withStyles(styles)(Projects)

我出现此错误消息

index.js：1452警告：道具类型失败：道具classes在projectList中标记为必需，但其值为undefined。

有人可以帮我解决这个问题吗？

Answer 1

不确定<Grid/>组件的来源，但是您可以传递projectLists的内联包装并将其作为jsx元素返回（不过您需要大写的首字母）：

<Grid item xs={12} sm={6} component={() => <ProjectList classes={classes} />} />

别忘了将大赦改为大写字母：

function ProjectList(props) {
...

将功能组件作为组件属性传递给类组件时出错

1 个答案: