[英]Getting Expected an assignment or function call and instead saw an expression no-unused-expressions error when trying to render a component in React
I am trying to render Card
component based on the number of items in the items
object but I am getting the error on line 6.我正在尝试根据
items
对象中的items
数呈现Card
组件,但在第 6 行出现错误。
import React from "react";
export class Cards extends React.Component {
render() {
let elements = [];
elements = this.props.items.map(item => {
<Card titles = {item.title} imgsrc = {item.urlToImage}
discr = {item.description} urls = {item.url}
/>
})
return (
{elements}
);
}
}
And this is the Card
component :这是
Card
组件:
import React from 'react'
export default ({titles, imgsrc, urls, discr}) => {
return (
<div className="cards">
<div className="card">
<div className="cardHead">
<h4>{titles}</h4>
</div>
<div className="cardBody">
<img src={imgsrc} alt="pst-img" />
</div>
<div className="cardFooter">
<p>{discr}</p>
<a className="buttn" href={urls}>
<button>Read More</button>
</a>
</div>
</div>
</div>
)
}
You are not returning the JSX in the .map
you need to do it like this:您没有在
.map
返回 JSX,您需要这样做:
import React from "react";
export class Cards extends React.Component {
render() {
let elements = [];
elements = this.props.items.map(item => {
return <Card titles = {item.title} imgsrc = {item.urlToImage}
discr = {item.description} urls = {item.url}
/>
})
return (
{elements}
);
}
}
Or in a Cleaner Way:或者以更清洁的方式:
import React from "react";
export class Cards extends React.Component {
render() {
return (
{this.props.items.map(item => {
return <Card titles = {item.title} imgsrc = {item.urlToImage}
discr = {item.description} urls = {item.url}
/>
})}
);
}
}
As the first answer, you need to return the JSX in map()
作为第一个答案,您需要在
map()
返回 JSX
Or using ( )
instead of {}
inside the map()
或者在
map()
使用( )
而不是{}
like this像这样
import React from "react";
export class Cards extends React.Component {
render() {
return (
{this.props.items.map(item => (
return <Card titles = {item.title} imgsrc = {item.urlToImage}
discr = {item.description} urls = {item.url}
/>
))}
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.