Блог

Главная - Вопросы по программированию - Реагирует на условное имя класса в моем родительском контейнере

Реагирует на условное имя класса в моем родительском контейнере

#javascript #reactjs #conditional-statements

#javascript #reactjs #условные операторы

Вопрос:

У меня следующий случай

 return (
    <section {...getRootProps({className: 'MuiFileDropArea-dashed'})}>
        My content
    </section>

Я хочу поместить условный оператор в строку раздела, чтобы, когда files.length > 0 className становится MuiFileDropArea-Nodashed

Как я могу это сделать?

Ответ №1:

Все, что вам нужно для этого, — это троичный оператор с обратными метками. Есть и другие способы, но это самый простой / самый простой для большинства людей, который можно прочитать при просмотре вашего кода позже.

 return (
    <section {...getRootProps({className: `MuiFileDropArea-${files.length > 0 ? 'Nodashed' : 'dashed'}`})}>
        My content
    </section>

Альтернативой может быть:

 return (
    <section {...getRootProps({className: files.length > 0 ? 'MuiFileDropArea-Nodashed' : 'MuiFileDropArea-dashed'})}>
        My content
    </section>
Метки: