[英]Why can't I import this CardList in JSX?
I'm doing with my homework about React.我正在做关于 React 的作业。
I'm tring to add Cards to the page and I created a Card.jsx
and a CardList.jsx
file to achieve this.我正在尝试将卡片添加到页面中,并创建了一个
Card.jsx
和一个CardList.jsx
文件来实现这一点。 And I used the faker
to help generating some random fake info.我使用
faker
者来帮助生成一些随机的虚假信息。 However, when I imported the CardList.jsx
to the App.js
file and ran it, I saw nothing but while page on the browser.但是,当我将
CardList.jsx
导入App.js
文件并运行它时,我只看到浏览器上的 while 页面。 I just dont know why and I've almost copy the same as the teacher gave.我只是不知道为什么,我和老师给的几乎一样。
Please help me!请帮我!
Here are the codes:以下是代码:
Card.jsx
: Card.jsx
:
import React from "react";
const Card = (props) => {
return (
<div>
<img src={props.avatar} alt="food" />
<h3>{props.article_name}</h3>
<p>{props.description}</p>
<h4>{props.author_name}</h4>
</div>
)
}
export default Card
CardList.jsx
import React from "react";
import Card from './Card'
import { faker } from '@faker-js/faker'
const CardList = () => {
return (
<div>
<Card
avatar={faker.image.fashion()}
article_name={faker.definitions.title()}
description={faker.lorem.paragraph()}
author_name={faker.name.firstName + ' ' + faker.name.lastName}
/>
</div>
)
}
export default CardList
App.js
import './App.css';
import CardList from './CardList'
function App() {
return (
<div className="App">
<CardList />
</div>
);
}
export default App;
In your CardList.jsx change code to this:在您的 CardList.jsx 中将代码更改为:
<div>
<Card
avatar = {faker.image.fashion()}
article_name = {faker.definitions.title}
description = {faker.lorem.paragraph()}
author_name = {faker.name.firstName() + ' ' + faker.name.lastName()}
/>
</div>
Since faker.definitions.title is not a function.由于 faker.definitions.title 不是 function。 If you would open your browser console, you will see an error message regarding the same.Please make sure you write functions as functions and variables as variables by reading documentation.
如果您打开浏览器控制台,您将看到一条错误消息。请确保通过阅读文档将函数编写为函数,将变量编写为变量。
firstName and lastName are functions so they need parentheses https://fakerjs.dev/api/name.html firstName 和 lastName 是函数,因此它们需要括号https://fakerjs.dev/api/name.html
Looking through the documentation, faker.definitions.title doesn't exist so you will need to use some other type of date for article_name查看文档,faker.definitions.title 不存在,因此您需要为 article_name 使用其他类型的日期
<div>
<Card
avatar={faker.image.fashion()}
article_name={faker.commerce.productName()} //using this as an example. replace with what you want
description={faker.lorem.paragraph()}
author_name={faker.name.firstName() + ' ' + faker.name.lastName()}
/>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.