我可以在 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}`} />;
}
工作示例:
我正在使用类似这样的东西 <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}`} />;
}
工作示例: