我可以在 React Jss 中设置动态 class 名称吗?

Can I set dynamic class name in React Jss with destructing

我正在使用类似这样的东西 <span className={`${status_icon} ${classes[`${status}`]}`} /> 但我想析构该对象并使用它。有什么办法吗?

目前我有

const classes = useStyles();  
const { status_icon } = classes;

我想这样用

const {status_icon, learning_in_progress, not_started} = useStyles();

源代码 - CodeSandBox

import React from "react";
import { createUseStyles } from "react-jss";

export default function App() {
  return (
    <>
      <h3>
        <LearnGridStatus status="not_started" />
        Not Started
      </h3>

      <h3>
        <LearnGridStatus status="learning_in_progress" />
        In Progress
      </h3>
    </>
  );
}

function LearnGridStatus({ status }) {
  const styles = {
    status_icon: {
      display: "inline-block",
      marginRight: "8px",
      width: "15px",
      height: "15px",
      verticalAlign: "middle",
      borderRadius: "50%"
    },
    not_started: {
      background: "#6a7887"
    },
    learning_in_progress: {
      background: "#3dc3ff"
    }
  };

  const useStyles = createUseStyles(styles);
  const classes = useStyles();
  const { status_icon } = classes;

  return (
    <span className={`${status_icon}  ${classes[`${status}`]}`} />
  );
}

是的,你可以使用 Computed property names:

const styles = {
  status_icon: {
    display: "inline-block",
    marginRight: "8px",
    width: "15px",
    height: "15px",
    verticalAlign: "middle",
    borderRadius: "50%"
  },
  not_started: {
    background: "#6a7883"
  },
  learning_in_progress: {
    background: "#3dc3ff"
  }
};

const useStyles = createUseStyles(styles);

function LearnGridStatus({ status }) {
  const { status_icon, [status]: currentStatus } = useStyles();

  return <span className={`${status_icon}  ${currentStatus}`} />;
}

工作示例: