vanyahuk
@vanyahuk

Почему вылетает ошибка при использовании if?

вот код
render() {


           return( <MuiThemeProvider>
                <AppBar title={false} showMenuIconButton={false}>

                    {if( this.props._sharedData.auth_user == 1 ){

                        <IconMenu
                        iconButtonElement={
                        <IconButton style={{height: '64px'}}>
                            <MoreVertIcon color={white}/>
                        </IconButton>}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}>

                        { Object.keys(this.props._sharedData.loc.account).map(
                            (item, i) => (
                                <MenuItem primaryText={this.props._sharedData.loc.account[item]}/>
                            ))}

                        </IconMenu>
                    }

                }

                </AppBar>
            </MuiThemeProvider> )
    }

и скрин ошыбки
5a95d1eb51b48035477447.png
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
Потому что это JSX. Можно исправить так:
render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;

  return (
    <AppBar>
      {shouldShowIconMenu && (
        <IconMenu>
          ...
        </IconMenu>
      )}
    </AppBar>
  );
}


JSX это все-таки синтаксический сахар над React.createElement. Вызов if-else, как и for внутри JSX транслировался бы в нерабочий код. Пример:
JSX:
<div id={if (condition) { 'msg' }}>Hello World!</div>

В результате трансляции получаем невалидный код:
React.createElement("div", { id: if (condition) { 'msg' } }, "Hello World!");
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
RomReed
@RomReed
JavaScript, Flutter, ReactNative, Redux, Firebase
this.props._sharedData.auth_user == 1 ?
 <IconMenu
                        iconButtonElement={
                        <IconButton style={{height: '64px'}}>
                            <MoreVertIcon color={white}/>
                        </IconButton>}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}>

                        { Object.keys(this.props._sharedData.loc.account).map(
                            (item, i) => (
                                <MenuItem primaryText={this.props._sharedData.loc.account[item]}/>
                            ))}

                        </IconMenu>
:null
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы