不应用反应js渲染中的动态类

Question

我正在以条件为基础申请上课，但不适用。但是当我应用类名静态时，它会成功应用。

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

为什么动态类不适用？

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