[英]How can I access the values of the props in my component?
I have this jsx component ArticleListItem which receives data as props and displays it.我有这个 jsx 组件 ArticleListItem,它接收数据作为道具并显示它。 When I run my web app, I get this error: Objects are not valid as a React child.当我运行我的 web 应用程序时,出现此错误:对象作为 React 子项无效。 How should I handle the props to access them the way I'm trying.我应该如何处理道具以按照我尝试的方式访问它们。 Here's the ArticleListItem component which throws the error:这是引发错误的 ArticleListItem 组件:
import { Link } from 'react-router-dom';
import { Button, Icon, Item, Segment, SegmentGroup } from 'semantic-ui-react';
export default function ArticleListItem(props) {
return(
<SegmentGroup>
<Segment>
<Item>
<Item.Header>
{props.article.title}
</Item.Header>
<Item.Content>
{props.article.description}
</Item.Content>
</Item>
</Segment>
<Segment>
<span>
<Icon name='clock' /> {props.article.publishedAt}
<Icon name='newspaper' /> {props.article.author}
</span>
</Segment>
<Segment>
<span>
<Icon name='globe' /> <Button>
as={Link}
to={props.article.url}
color='teal'
floated='right'
content='View' </Button>
</span>
</Segment>
</SegmentGroup>
)
}
Here's an example of the props这是道具的例子
{
"source": {
"id": "business-insider",
"name": "Business Insider"
},
"author": "Diamond Naga Siu",
"title": "See how much Apple pays engineers, analysts and thousands of others",
"description": "Insider analyzed thousands of Apple's H-1B visa applications to get a sense of how much it pays employees.",
"url": "http://www.businessinsider.com/see-how-much-apple-pays-engineers-analysts-and-thousands-others-2022-9",
"urlToImage": "https://i.insider.com/633222528345c90018de0060?width=1200&format=jpeg",
"publishedAt": "2022-09-28T12:00:00Z",
"content": null
}
And here's the code block where I'm passing the props to this component:这是我将道具传递给该组件的代码块:
return (
<>
{props.articles && props.articles.map(article => (<ArticleListItem key={article.title} article={article} />
))}
</>
)
The idea of my web app is to fetch news from my api and to show them.我的 web 应用程序的想法是从我的 api 获取新闻并显示它们。 I get an array of news, map over them and create an ArticleListItem for each of them.我得到了一系列新闻,map,并为每个新闻创建了一个ArticleListItem 。 Any help appreciated!任何帮助表示赞赏!
Your props are not inside the button tag.您的道具不在按钮标签内。 The ">" tag was misplaced “>”标签放错地方了
<Button
as={Link}
to={props.article.url}
color='teal'
floated='right'
content='View'>
Test
</Button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.