[英]Conditional rendering of component
I am trying to render a component only if asset.id === collection.masterAssetId
.我仅在asset.id === collection.masterAssetId
时才尝试渲染组件。 If this is the case a star icon should appear.如果是这种情况,应该会出现一个星形图标。 I am using the getMasterId
function to check this condition.我正在使用getMasterId
function 来检查这种情况。 Anyone that knows what the error is here?有谁知道这里的错误是什么?
Error:错误:
Parsing error: Unexpected token
70 |
71 | {
> 72 | if(asset.id === this.getMasterId(asset.id)){
| ^
73 | <FaStar />
74 | }}
App.js应用程序.js
import React from 'react';
import './App.css';
import {collections} from "./data.js"
import {assets} from "./data.js"
import {FontAwesome, FaStar} from "react-icons/fa"
class App extends React.Component {
constructor() {
super()
this.state = {
collectionsarr: collections,
assetsarr: assets,
clickedassets: []
}
}
getMasterId(assetnr){
const assetnum = this.state.collectionsarr.find(element => element.masterAssetId === assetnr).masterAssetId
return assetnum
}
render(){
return (
<div className="App">
<h1>Sitecore coding challenge</h1>
<div className="left">
{this.state.collectionsarr.map(element =>
<div key={element.id}>
<p onClick={()=>this.handleAssetsClick(element.id)}>{element.name}</p>
<img src={this.getAssetPath(element.masterAssetId)} alt="pic"/>
<br></br>
</div>
)}
</div>
<div className="right">
{this.state.clickedassets.map(asset =>
<div key={asset.id}>
<img src={require(`./${asset.path}`)} alt="pic"/>
<p>{asset.name}</p>
<p>{asset.id}</p>
<button onClick={() => this.makeMaster(asset.id)}>Make master!</button>
<p>icon "this is the master</p>
{
if(asset.id === this.getMasterId(asset.id)){
<FaStar />
}}
<br></br>
</div>
)}
</div>
</div>
)
}
}
You can't use statements in inline code within the return statement.您不能在 return 语句的内联代码中使用语句。 You can only use expressions.您只能使用表达式。
An if statement is a statement, so you should replace it with an expression such as the ternary operator x? y: z
if 语句是一个语句,因此您应该将其替换为表达式,例如三元运算符x? y: z
x? y: z
or conditional and operator &&
: x? y: z
或条件运算符&&
:
// ternary
asset.id === this.getMasterId(asset.id) ? <FaStar /> : null
or:或者:
// conditional and
asset.id === this.getMasterId(asset.id) && <FaStar />
React has some great docs on conditional rendering . React 有一些关于条件渲染的优秀文档。
Be careful when using the conditional and &&
, as if the first argument is the number 0
(for example, list.length && <Component />
) then you will end up rendering a 0
instead of nothing.使用条件和&&
时要小心,好像第一个参数是数字0
(例如, list.length && <Component />
),那么您最终将呈现0
而不是什么都没有。
In those cases it's best to cast to a Boolean:在这些情况下,最好转换为 Boolean:
Boolean(list.length) && <Component />
or:或者:
!!list.length && <Component />
See if this works看看这是否有效
(asset.id === this.getMasterId(asset.id))? <FaStar />: <></>;
Within the return code of the render function, you can only use expressions (things that are allowed on the right side of an equals).在渲染 function 的返回代码中,您只能使用表达式(等号右侧允许使用的东西)。 if
is a statement, so it is not allowed. if
是一个语句,所以它是不允许的。 Example that doesn't work:不起作用的示例:
const a = if(asset.id === this.getMasterId(asset.id)) return <FaStar />
However, a ternary expression is allowed.但是,允许使用三元表达式。 This would then look like this:然后看起来像这样:
const a = asset.id === this.getMasterId(asset.id) ? <FaStar /> : null
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.