Блог

Главная - Вопросы по программированию - Не применять динамический класс при рендеринге react js

Не применять динамический класс при рендеринге react js

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я применяю класс на основе условий, но он не применяется. Но когда я применяю имя класса static, оно применяется успешно.

 const styles = theme => ({
  labelsuccess: {
    "background-color": "#5cb85c"
  },
  labelprogress: {
    "background-color": "#f0ad4e"
  }
});

let labelcolor = [
            {
              status: "In Progress",
              class: "classes.labelprogress"
            },
            {
              status: "Completed",
              class: "classes.labelsuccess"
            }
          ];

{Developertasklist.map((task, index) => (
  <ListItem key={index} divider="true">
    <div className={classes.taskwidth}>
      <span className={classes.hideelement}>
        {
          (foundValue = labelcolor.filter(
            obj => obj.status === task.status
          )[0].class)
        }
      </span>

      <ListItemText
        primary={
          <React.Fragment>
            {task.name} - {task.due_date}
          </React.Fragment>
        }
        secondary={
          <React.Fragment>
            <Typography
              component="span"
              className={foundValue}
              color="textPrimary"
            >
              {task.status}
            </Typography>
          </React.Fragment>
        }
      />
    </div>
  </ListItem>
))}

Почему динамический класс не применяется?

Ответ №1:

установите свою переменную перед возвращением. Не внутри.

с функциями со стрелками вам не нужно использовать return, если вы используете скобки, подобные этой () => ( ... ) , но если вы хотите задать переменную или вычисление, используйте с фигурными скобками и return оператор. вот так;

() => {
const a = 'variable';
return ( <div class={a}>... );
}

попробуйте это.

 {Developertasklist.map((task, index) => {
 const foundValue = labelcolor.filter(
     obj => obj.status === task.status
 )[0].class;
 return (
  <ListItem key={index} divider="true">
    <div className={classes.taskwidth}>

      <ListItemText
        primary={
          <React.Fragment>
            {task.name} - {task.due_date}
          </React.Fragment>
        }
        secondary={
          <React.Fragment>
            <Typography
              component="span"
              className={foundValue}
              color="textPrimary"
            >
              {task.status}
            </Typography>
          </React.Fragment>
        }
      />
    </div>
  </ListItem>
)}
)}

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

1. Я пытаюсь использовать этот код, но не получается применить класс. когда применяете динамический класс и проверяете элемент, тогда элемент типа <span class=»классы. labelsuccess»>Завершено</span>, и когда применяется статический класс и проверяется элемент, тогда элемент выглядит как <span class=»DeveloperTasks-labelsuccess-13zw7wv»>Завершено</span>

2. могу ли я увидеть имя вашего класса, которое вы хотите отобразить, и ваш пробный способ рендеринга?

3. Я применяю статический класс, например className={classes . labelsuccess} и использование динамического типа className={foundValue}

4. что вы хотите видеть в имени класса в инспекторе? используйте его в массиве labelColor

5. Нет, я не хочу видеть имя класса в инспекторе, но я просто объясняю вам, что такое рендеринг в инспекторе, когда я применяю статический и динамический класс.

Метки: