Question

我正在基于条件应用课程，但不适用。但是当我将类名应用为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>
))}

为什么动态类不适用？

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

在React JS渲染中不应用动态类

1 个答案: