Question

我发现在反应中渲染子组件时遇到了问题。我正在使用React-Toolbox进行样式化。

我有以下json文件

{
  "projects":[
    {
    "id":1,
    "project_name":"Tensor Flow",
    "category":"Machine Learning",
    "skills":[{"id":1,"skill_name":"Python"},{"id":2,"skill_name":"Javascript"}]
    },
    {
      "id":2,
      "project_name":"React Toolbox",
      "category":"Frameworks",
      "skills":[{"id":2,"skill_name":"Javascript"},{"id":3,"skill_name":"React"}]
    },
    {
      "id":3,
      "project_name":"Guitar Pro",
      "category":"Music",
      "skills":[{"id":2,"skill_name":"Javascript"},{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"}]
    },
    {
      "id":4,
      "project_name":"Soccer.js",
      "category":"Sports",
      "skills":[{"id":4,"skill_name":"Node"},{"id":1,"skill_name":"Python"},{"id":5,"skill_name":"Golang"}]
    }
  ]
}

此文件应在名为Project

的组件中呈现

我的Project.jsx文件如下

render(){
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
    return(

      <Card className={styles.card} key={this.props.id}>
        <CardTitle
          title={this.state.project.project_name}
          subtitle={this.state.project.category}
          />
        <CardText>{dummyText}</CardText>

            {this.state.project.skills.map((skill) => {
              console.log('Skill is: ',skill);
              <CardActions>
                <Chip key={skill.id}>{skill.skill_name}</Chip>
              </CardActions>
            })}

      </Card>

由于我似乎不理解的原因，CardActions组件未在页面中呈现。我不确定原因是什么。

Answer 1

您未在地图功能中返回CardActions：

render(){
    const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
    return(

      <Card className={styles.card} key={this.props.id}>
        <CardTitle
          title={this.state.project.project_name}
          subtitle={this.state.project.category}
          />
        <CardText>{dummyText}</CardText>

            {this.state.project.skills.map((skill) => {
              console.log('Skill is: ',skill);
              return (
                <CardActions key={skill.id}>
                  <Chip>{skill.skill_name}</Chip>
                </CardActions>
              );
            })}

      </Card>
    );
}

React Component不会在脚本语句中呈现

1 个答案: