javascript - 我可以在 React Jss 中使用破坏设置动态类名吗

Question

我正在使用类似的东西，<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}`]}`} />
  );
}

标签： javascriptreactjsjsscss-in-js

Answer 1

是的，您可以使用计算属性名称：

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}`} />;
}

工作示例：