使用映射方法显示数组中的PDF

时间:2019-11-06 14:57:14

标签: javascript arrays reactjs pdf

当用户单击与pdf相关的难度对应的下拉菜单选项时,我正在尝试显示pdf文件。我将它们放在数组中,作为每个难度的对象。我想显示图像,但不确定如何显示。

let beginner = [
  {name: 'Music City', image: './assets/MusicCity.pdf'},
  {name: 'Pacific Crest', image: './assets/PacificCrest.pdf'},
  {name: 'Troopers', image: './assets/Troopers.pdf'}
];

let intermediate = [
  {name: 'Blue Devils', image: './assets/BlueDevils.pdf'},
  {name: 'Mandarins', image: './assets/Mandarins.pdf'},
  {name: 'Star of Indiana', image: './assets/StarOfIndy.pdf'}
];

let advanced = [
  {name: 'Cadets', image: './assets/Cadets.pdf'},
  {name: 'Bluecoats', image: './assets/Bluecoats.pdf'},
  {name: 'Santa Clara Vanguard', image: './assets/SCV.pdf'}
];

let displayMusic = (item) => {
  let music = [item.name, item.image].join(' ');
  return music;
}

const checkSkill = (skill) => {
  // console.log(skill);

  if (skill === 'beginner') {
    return(beginner.map(displayMusic))
  } else if (skill === 'intermediate') {
    return(intermediate)
  } else if (skill === 'advanced') {
    return(advanced)
  } else {
    return(null)
  }
}; 

JSX

 <DropdownMenu>
        <DropdownItem header>Selet a skill level</DropdownItem>
        <DropdownItem onClick={(e) => checkSkill(e.target.value)} value="beginner">Beginner</DropdownItem>
        <DropdownItem onClick={(e) => checkSkill(e.target.value)} value="intermediate">Intermediate</DropdownItem>
        <DropdownItem onclick={(e) => checkSkill(e.target.value)} value="advanced">Advanced</DropdownItem>
      </DropdownMenu>

0 个答案:

没有答案
相关问题