React localhost 页面显示一个空白的白页，什么都没有显示答案

【问题标题】：React localhost page shows a blank white-page,nothing is showing upReact localhost 页面显示一个空白的白页，什么都没有显示
【发布时间】：2019-02-06 22:04:07
【问题描述】：

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

我使用了一个名为 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();

【问题讨论】：

标签： javascript reactjs react-redux jsx

【解决方案1】：

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

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

<Card /> 获取道具（id、name、email），但它们不在 Card 组件中使用。

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

【讨论】：

即使我添加了
{props}
和
{props}
仍然有一个空白的白页。我不知道我做错了什么。
导入 css??太多奇怪的事情/可能的错误；显示您的 html - 使用 js 和 <div id="root"></div> .... 的最小部分或在 stackblitz 中重新创建它
谢谢，终于成功了！这是大小写的问题，也是我的 card.js 导入的问题

【解决方案2】：

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

【讨论】：

谢谢，终于成功了！这是大小写的问题，也是我的 card.js 的导入问题

{props}