[英]Can this class be changed into a React stateless function?
I am trying to change a react class into a stateless function but encounter some errors. 我正在尝试将React类更改为无状态函数,但遇到一些错误。 Can you please help? 你能帮忙吗? The class is rendering a list in table format. 该类以表格格式呈现列表。
I first tried: 我首先尝试:
function LeaseList(props) {
return (
<Table hover bordered striped responsive>
<tbody>
{
props.isLoading ?
<div>Is Loading...</div> :
props.leases.map(lease =>
<Lease key=lease._links.self.href
lease=lease
attributes=props.attributes
handleDelete=props.handleDelete
handleUpdate=props.handleUpdate/>
);
}
</tbody>
</Table>
);
}
But got error: 但是有错误:
JSX value should be either an expression or a quoted JSX text (345:39)
343 | <div>Is Loading...</div> :
344 | props.leases.map(lease =>
> 345 | <Lease key=lease._links.self.href
| ^
346 | lease=lease
347 | attributes=props.attributes
348 | handleDelete=props.handleDelete
Then I tried to place brackets around leases like this: 然后,我尝试将方括号放在这样的租约周围:
function LeaseList(props) {
return (
<Table hover bordered striped responsive>
<tbody>
{
props.isLoading ?
<div>Is Loading...</div> :
props.leases.map(lease =>
<Lease key={lease._links.self.href}
lease={lease}
attributes={props.attributes}
handleDelete={props.handleDelete}
handleUpdate={props.handleUpdate}/>
);
}
</tbody>
</Table>
);
}
But got error: 但是有错误:
Unexpected token, expected } (350:25)
348 | handleDelete={props.handleDelete}
349 | handleUpdate={props.handleUpdate}/>
> 350 | );
| ^
351 | }
352 | </tbody>
353 | </Table>
Update 1: Remove ; 更新1:删除; from ); 来自);
function LeaseList(props) {
return (
<Table hover bordered striped responsive>
<tbody>
{
props.isLoading ?
<div>Is Loading...</div> :
props.leases.map(lease =>
<Lease key=lease._links.self.href
lease=lease
attributes=props.attributes
handleDelete=props.handleDelete
handleUpdate=props.handleUpdate/>
)
}
</tbody>
</Table>
);
}
Still failing with same error: 仍然失败,并显示相同的错误:
JSX value should be either an expression or a quoted JSX text (345:39)
343 | <div>Is Loading...</div> :
344 | props.leases.map(lease =>
> 345 | <Lease key=lease._links.self.href
| ^
346 | lease=lease
347 | attributes=props.attributes
348 | handleDelete=props.handleDelete
Try removing ;
尝试删除;
from line 345. There is no reason for this to be there. 从第345行开始。没有理由这样做。 Also don't forget to use {}
around the props. 另外,不要忘记在道具周围使用{}
。
function LeaseList(props) {
return (
<Table hover bordered striped responsive>
<tbody>
{
props.isLoading ?
<div>Is Loading...</div> :
props.leases.map(lease =>
<Lease key={lease._links.self.href}
lease={lease}
attributes={props.attributes}
handleDelete={props.handleDelete}
handleUpdate={props.handleUpdate}/>
)
}
</tbody>
</Table>
);
}
You forgot some curly braces line 345: 您忘记了一些花括号345行:
function LeaseList(props) {
return (
<Table hover bordered striped responsive>
<tbody>
{
props.isLoading ?
<div>Is Loading...</div> :
{props.leases.map(lease =>
<Lease key=lease._links.self.href
lease=lease
attributes=props.attributes
handleDelete=props.handleDelete
handleUpdate=props.handleUpdate/>
)}
}
</tbody>
</Table>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.