这是我的代码,我不知道我做错了什么。
我使用了一个名为robohash的网站,它让我们生成随机机器人图像,无论我包含什么文本,例如robohash.org/test(我在我的代码中使用过)。
此外,命令提示符显示它已编译,没有错误或警告。
// Card.js
import React from 'react';
const Card = () => {
return (
<div className = 'tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
<img alt='robots' src='https://robohash.org/test' />
<div>
<h2> Jane Doe </h2>
<p> [email protected] </p>
</div>
</div>
);
}
export default Card;
// robot.js file
export const robots = [
{
id: 1,
name: 'Leanne Graham',
username: 'Bret',
email: '[email protected]'
},
{
id: 2,
name: 'Ervin Howell',
username: 'Antonette',
email: '[email protected]'
},
{
id: 3,
name: 'Clementine Bauch',
username: 'Samantha',
email: '[email protected]'
},
{
id: 4,
name: 'Patricia Lebsack',
username: 'Karianne',
email: '[email protected]'
},
{
id: 5,
name: 'Chelsey Dietrich',
username: 'Kamren',
email: '[email protected]'
},
{
id: 6,
name: 'Mrs. Dennis Schulist',
username: 'Leopoldo_Corkery',
email: '[email protected]'
},
{
id: 7,
name: 'Kurtis Weissnat',
username: 'Elwyn.Skiles',
email: '[email protected]'
},
{
id: 8,
name: 'Nicholas Runolfsdottir V',
username: 'Maxime_Nienow',
email: '[email protected]'
},
{
id: 9,
name: 'Glenna Reichert',
username: 'Delphine',
email: '[email protected]'
},
{
id: 10,
name: 'Clementina DuBuque',
username: 'Moriah.Stanton',
email: '[email protected]'
}
];
//imdex.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import card from './Card';
import 'tachyons';
import { robots } from './robots';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<div>
<card id={robots[0].id} name={robots[0].name} email={robots[0].email} />
<card id={robots[1].id} name={robots[1].name} email={robots[1].email} />
<card id={robots[2].id} name={robots[2].name} email={robots[2].email} />
</div>
, document.getElementById('root'));
registerServiceWorker();
最有可能的原因是:Card
作为card
进口,它必须是大写的!
<card id={robots[0].id} name={robots[0].name} email={robots[0].email} />
<Card />
获取道具(id,名称,电子邮件),但它们不在Card组件内使用。
为什么手动/硬编码卡? List组件在哪里,循环渲染......从更好的教程中找到并学习。
你确定你有一个index.html包含<div id="root"></div>
。您也可以尝试为卡片添加键值。你可以添加浏览器控制台输出吗?我无法发表评论,所以我在这里写道。