Javascript 组件的条件呈现

仅当

asset.id==collection.masterAssetId

时，我才尝试渲染组件。如果是这种情况，则应显示星形图标。我正在使用

getMasterId

功能检查此情况。有人知道这里的错误是什么吗

---

错误：

Parsing error: Unexpected token

  70 |                     
  71 |                     {
> 72 |                       if(asset.id === this.getMasterId(asset.id)){
     |                       ^
  73 |                       <FaStar />
  74 |                     }}

分析错误：意外的令牌
70 |                     
71 |                     {
>72 |如果（asset.id==this.getMasterId（asset.id））{
|                       ^
73 |                       
74 |                     }}

---

App.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>
        )
  }
}

从“React”导入React；
导入“/App.css”；
从“/data.js”导入{collections}
从“/data.js”导入{assets}
从“react icons/fa”导入{FontAwesome，FaStar}
类应用程序扩展了React.Component{
构造函数（）{
超级（）
此.state={
收藏沙龙：收藏，
资产：资产，
单击资产：[]
}
}
getMasterId（assetnr）{
const assetnum=this.state.collectionsarr.find（element=>element.masterAssetId===assetrn.masterAssetId
返回资产
}
render（）{
返回(
Sitecore编码挑战
{this.state.collectionsarr.map（元素=>
this.handleSetsClick（element.id）}>{element.name}



)}
{this.state.clickedassets.map（资产=>
{asset.name}

{asset.id}

this.makeMaster（asset.id）}>makeMaster！
图标“这是主机

{
if（asset.id==this.getMasterId（asset.id））{
}}



)}
)
}
}

您使用的语法错误，请将其更改为

 { asset.id === this.getMasterId(asset.id) && <FaStar /> }

{asset.id==this.getMasterId（asset.id）&&&}

---

阅读有关条件呈现的详细信息

您不能在return语句的内联代码中使用语句。您只能使用表达式

if语句是一个语句，因此应该用三元运算符

x？y:z

或条件and运算符

&&

等表达式替换它：

// ternary
asset.id === this.getMasterId(asset.id) ? <FaStar /> : null

或：

！！list.length&&

看看这是否有效

---

（asset.id==this.getMasterId（asset.id））？：；

在渲染函数的返回代码中，只能使用表达式（equals右侧允许的内容）。

如果
是语句，则不允许使用它。不起作用的示例：

const a=if（asset.id==this.getMasterId（asset.id））返回

但是，允许使用三元表达式。这将如下所示：

const a=asset.id==this.getMasterId（asset.id）？：null
尝试使用三元运算符
x？y:z
而不是if语句，或者使用条件and运算符
&
是否搜索：“条件渲染反应”？第一个结果：很好，现在我得到了以下结果：TypeError:无法读取未定义的属性“masterAssetId”。知道为什么吗？@charlesbxl这意味着
元素<“代码”是未定义的。这意味着有一个“问题”与您的代码> CoputsSARR < /代码>。您是否有元素？如果您从答案中得到解决方案，请考虑将其标记为“很棒”，现在我得到：Type Error：无法读取未定义的代码“MistasaseTID”。（element=>element.masterAssetId===assetnr）.masterAssetId
数组。如果条件不匹配，find
将返回
undefined
。请确保在尝试访问对象上的属性之前检查对象是否存在。好的，很好，现在我得到了：TypeError:无法读取未定义的属性“masterAssetId”。知道原因吗？好的，现在我得到了：TypeError:无法读取未定义的属性“masterAssetId”。知道原因吗？很好，现在我得到了：TypeError:无法读取未定义的属性“masterAssetId”。知道原因吗？
// conditional and
asset.id === this.getMasterId(asset.id) && <FaStar />

Boolean(list.length) && <Component />

!!list.length && <Component />