条件呈现情况下的意外标记

Question

我在条件呈现中遇到了一个意外的令牌错误。不过，我觉得它很好，但不知道出了什么问题。

{isAdd===true? 
countries.map(item=>{
return(
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
);
}))
:
return (
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>
);
}

Answer 1

只需在组件外部添加return(假设它位于render()函数的顶部(：

return isAdd===true ? 
countries.map(item=> (
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
))
:
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>;

如果它嵌套在组件中，只需包含{括号即可将其视为变量：

render() {
return (
<div>
{isAdd===true ? 
countries.map(item=> (
<MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>
))
:
<MenuItem key={101} value={101}>{'Country1'}</MenuItem>
}
</div>
);
}

Answer 2

您的return语句有问题。试试这个。。。

var returnItem;
{isAdd===true? 
countries.map(item => {
returnItem = <MenuItem key={item.iso2} value={item.iso2}>{item.name}</MenuItem>;
})
:
returnItem =<MenuItem key={101} value={101}>{'Country1'}</MenuItem>;
}
return returnItem;