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

Question

[Vanya Huk]

вот код

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

и скрин ошыбки

Answer 1

[Антон Спирин]

Потому что это 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!");

Comments

[Vanya Huk]

Антон Спирин а как добавить else?

[Антон Спирин]

Vanya Huk,

render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;

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

или:

render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;

  return (
    <AppBar>
      {shouldShowIconMenu ? (
        <IconMenu>
          ...
        </IconMenu>
      ) : (
        <SomeThingElse />
      )}
    </AppBar>
  );
}

или:

render() {
  const { _sharedData: { auth_user } } =  this.props;

  const shouldShowIconMenu = +auth_user === 1;
  
  const innerContent = shouldShowIconMenu ? (
    <IconMenu>
      ...
    </IconMenu>
  ) : (
    <SomeThingElse />
  );
  
  return (
    <AppBar>
      {innerContent}
    </AppBar>
  );
}

или:

renderIconMenu() {
  const { _sharedData: { auth_user } } =  this.props;
  const shouldShowIconMenu = +auth_user === 1;
  
  return shouldShowIconMenu ? (
    <IconMenu>
      ...
    </IconMenu>
  ) : (
    <SomeThingElse />
  );
}

render() {
  const { _sharedData: { auth_user } } =  this.props;
 
  return (
    <AppBar>
      {this.renderIconMenu()}
    </AppBar>
  );
}

Answer 2

[Роман Александрович]

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