条件渲染时的意外标记

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

您的退货声明存在问题。试试这个...

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;