React localhost页面显示空白页面，什么都没有显示

Question

这是我的代码，我不知道我在做什么错。

我使用了一个名为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> Jannythemanny@gmail.com </p> </div> </div> ); } export default Card; 

 // robot.js file export const robots = [ { id: 1, name: 'Leanne Graham', username: 'Bret', email: 'Sincere@april.biz' }, { id: 2, name: 'Ervin Howell', username: 'Antonette', email: 'Shanna@melissa.tv' }, { id: 3, name: 'Clementine Bauch', username: 'Samantha', email: 'Nathan@yesenia.net' }, { id: 4, name: 'Patricia Lebsack', username: 'Karianne', email: 'Julianne.OConner@kory.org' }, { id: 5, name: 'Chelsey Dietrich', username: 'Kamren', email: 'Lucio_Hettinger@annie.ca' }, { id: 6, name: 'Mrs. Dennis Schulist', username: 'Leopoldo_Corkery', email: 'Karley_Dach@jasper.info' }, { id: 7, name: 'Kurtis Weissnat', username: 'Elwyn.Skiles', email: 'Telly.Hoeger@billy.biz' }, { id: 8, name: 'Nicholas Runolfsdottir V', username: 'Maxime_Nienow', email: 'Sherwood@rosamond.me' }, { id: 9, name: 'Glenna Reichert', username: 'Delphine', email: 'Chaim_McDermott@dana.io' }, { id: 10, name: 'Clementina DuBuque', username: 'Moriah.Stanton', email: 'Rey.Padberg@karina.biz' } ]; 

 //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(); 

Answer 1

您确定有一个index.html包含<div id="root"></div> 。 您也可以尝试为卡添加键值。 并且可以添加浏览器控制台输出吗？ 我无法发表评论，所以我在这里写了。

Answer 2

最可能的原因是： Card作为card导入，它必须是大写的！

<card id={robots[0].id} name={robots[0].name} email={robots[0].email} />

<Card />获取道具（ID，名称，电子邮件），但它们未在Card组件内使用。

为什么卡片要手动/硬编码？ List组件在哪里，循环渲染...在更好的教程中查找和学习。