Передача изображения в качестве опоры - PullRequest
Новая
       5

Передача изображения в качестве опоры

0 голосов
/ 27 марта 2020

Я пытаюсь передать изображение в качестве опоры из моего объекта Matchups в мой компонент TeamGrid.

Дом. js

import React from "react";
import TeamGrid from "./TeamGrid.js";
import Prediction from "./Prediction.js";
import GridContainer from "./GridContainer.js";

//Matchups
import Matchups from "./Matchups.js";

export default function TeamSection() {
  return (
    <div>
      <GridContainer>
        <TeamGrid logo={Matchups[0].homeImg} alt={Matchups[0].homeAlt} />
        <Prediction />
        <TeamGrid logo={Matchups[0].awayImg} alt={Matchups[0].awayAlt} />
      </GridContainer>
    </div>
  );
}

TeamGrid. js

export default function TeamGrid(props) {
  const classes = useStyles();
  const imageClasses = classNames(
    classes.imgRaised,
    classes.imgRoundedCircle,
    classes.imgFluid
  );
  return (
    <GridItem xs={12} sm={12} md={4}>
      <Button color="primary">
        <Card plain>
          <GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
            <img
              src={require("../../assets/teams/${this.props.logo}")}
              alt={this.prop.alt}
              className={imageClasses}
            />
          </GridItem>
          <h4 className={classes.cardTitle}>
            Team
            <br />
            <small className={classes.smallTitle}>Record</small>
          </h4>
        </Card>
      </Button>
    </GridItem>
  );
}

Matchups. js

export const Matchups = [
  {
    homeImg: "Seahawks.gif",
    homeAlt: "Seahawks",
    awayImg: "Vikings.gif",
    awayAlt: "Vikings"
  },
  {
    homeImg: "Titans.gif",
    homeAlt: "Titans",
    awayImg: "Jaguars.gif",
    awayAlt: "Jaguars"
  }
];

Я в настоящее время получаю: «Ошибка типа: невозможно прочитать свойство '0' из неопределенного» * ​​1012 *

Я изучаю React as I go с этим проектом, поэтому любая помощь будет принята с благодарностью!

1 Ответ

1 голос
/ 27 марта 2020

Не могли бы вы попробовать вот так: 

import React from "react";
import TeamGrid from "./TeamGrid.js";
import Prediction from "./Prediction.js";
import GridContainer from "./GridContainer.js";

//Matchups
import {Matchups} from "./Matchups.js";

export default function TeamSection() {
  return (
    <div>
      <GridContainer>
        <TeamGrid logo={Matchups[0].homeImg} alt={Matchups[0].homeAlt} />
        <Prediction />
        <TeamGrid logo={Matchups[0].awayImg} alt={Matchups[0].awayAlt} />
      </GridContainer>
    </div>
  );
}

Я думаю, что ваша проблема в том, что ваша константа не экспортируется как объект по умолчанию для данного файла. Таким образом, у вас есть несколько решений:

  1. вы можете разложить объект при импорте: import {Matchups} from "./Matchups.js";
  2. вы можете использовать импортированный объект и получить доступ к константе как свойству объекта 
    ...
<TeamGrid logo={matchup.Matchups[0].homeImg} alt={matchup.Matchups[0].homeAlt} />```
...