“种子”没有定义为un-undef。 seed.js具有IIFE

时间:2019-08-02 05:57:54

标签: reactjs iife

在Accomazzo撰写的《 React Fullstack》一书中,他们在第一章中使用seed.js作为数据源。它具有IIFE,他们使用窗口对象在项目中的任何地方使用它。但是当我创建自己的react项目并遵循代码时,它显示了一个错误,指出未定义Seed为no-undef

我尝试导入,包括html文件中的js文件,但这些文件似乎无效

这是app.js文件

import React from 'react';
class PlayerList extends React.Component {
  render() {
    const player = Seed.players[0]
    return (
      <div className='ui unstackable items'>
        <Player 
        id={player.id}
        name={player.name}
        club={player.club}
        url={player.url}
        votes={player.votes}
        submitterAvatarUrl={player.submitterAvatarUrl}
        playerImgUrl={player.playerImgUrl}
        />
      </div>
    )
  }
}

这是seed.js文件

window.Seed = (function () {
  function generateVoteCount() {
    return Math.floor((Math.random() * 50) + 15);
  }

  const players = [
    {
      id: 1,
      name: 'CR7',
      club: 'Juventus',
      url: '#',
      votes: generateVoteCount(),
      submitterAvatarUrl: 'images/avatars/profile-pic.jpeg',
      playerImgUrl: 'images/players/CR7.jpg',
    },
    {
      id: 2,
      name: 'LM10',
      club: 'Barcelona',
      url: '#',
      votes: generateVoteCount(),
      submitterAvatarUrl: 'images/avatars/kristy.png',
      playerImgUrl: 'images/players/LM10.jp',
    },
    {
      id: 3,
      name: 'MS10',
      club: 'Liverpool',
      url: '#',
      votes: generateVoteCount(),
      submitterAvatarUrl: 'images/avatars/veronika.jpg',
      playerImgUrl: 'images/players/MS10.jpg',
    },
  ];

  return { players: players };
}());

1 个答案:

答案 0 :(得分:0)

在这里您可以找到一个有效的示例,只需导入您的种子文件即可。基本上,您只需要import 'seed',为避免错误,请添加window.Seed

https://codesandbox.io/s/stackoverflow-import-iife-5mojf