Не применять динамический класс в реагировании рендеринга JS - PullRequest
Новая
       6

Не применять динамический класс в реагировании рендеринга JS

1 голос
/ 17 апреля 2019

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

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 Ответ

1 голос
/ 17 апреля 2019

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

с функциями стрелок, вам не нужно использовать 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>
)}
)}
...