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

只需在组件外部添加返回值（假设它位于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;

在条件渲染的情况下出现意外令牌

2 个答案: