Блог

Главная - Вопросы по программированию - Как писать в jsx, если под if?

Как писать в jsx, если под if?

#reactjs #jsx

Вопрос:

Я хочу написать так в своем jsx, но я не знаю, как это сделать.

 if(condition){
  if(condition){
  }else{

  }
}

Как я могу так писать в jsx? спасибо за помощь.

         {canDelete === 1 amp;amp; //first if
          {u.status === 'Active' ?( //second if
            <Tooltip>Deactivate</span>} arrow>
              <IconButton 
                  className={classes.deactivateButton}
              >  
              <HighlightOffIcon />
              </IconButton>
            </Tooltip>
            ):(  //else
            <Tooltip>Activate</span>} arrow>
              <IconButton 
                  className={classes.activateButton}
              >  
              <CheckCircleOutlineIcon />
              </IconButton>
            </Tooltip>
            )
          }
        }

Комментарии:

1. как? не могли бы вы привести пример, пожалуйста?

2. Ответ Даниала должен помочь вам решить вашу проблему.

Ответ №1:

Вы можете добавить фрагмент jsx <></> в каждый оператор if

 {canDelete === 1 amp;amp; 
    <>
    {u.status === 'Active' ?
        ( 
            <Tooltip>Deactivate</span>} arrow>
                <IconButton 
                    className={classes.deactivateButton}
                >  
                    <HighlightOffIcon />
                </IconButton>
            </Tooltip>
        ):(
            <Tooltip>Activate</span>} arrow>
                <IconButton 
                    className={classes.activateButton}
                >  
                    <CheckCircleOutlineIcon />
                </IconButton>
            </Tooltip>)
        }
    </>
}

Ответ №2:

         {canDelete === 1 ?
          u.status === 'Active' ? (
            <Tooltip>Deactivate</span>} arrow>
              <IconButton 
                  className={classes.deactivateButton}
              >  
              <HighlightOffIcon />
              </IconButton>
            </Tooltip>
            ) : (
            <Tooltip>Activate</span>} arrow>
              <IconButton 
                  className={classes.activateButton}
              >  
              <CheckCircleOutlineIcon />
              </IconButton>
            </Tooltip>
            )
          : (<></>)
        }

Что-то в этом роде должно сработать. Вы не должны делать другого { , это просто способ как бы сбежать от JSX, так что одного достаточно. Теперь вы можете выполнить два внутренних троичных оператора, связанных цепочкой. Это не очень чисто, но должно сработать.

Метки: ,