将 className 更改为使用模板文字

Question

我正在尝试学习模板文字，我有我的项目我需要在那里使用模板文字，我有一个看起来很简单的问题，但不知道我做错了什么

这是有效的：

const classes = props.classes;

return (
<List
  component="div"
  data-testid="SelectionListt"

  className={classes.selectionList__sites}
>

</List>
);

我的问题是我应该如何使用模板文字来转换该类名。

这就是我所做的：

 const classes = props.classes; return ( <List component="div" data-testid="SelectionListt" className={` ${classes + ".selectionList__sites"} `}` > </List> );

这是我的 selectionList__sites：

 selectionList__sites: { backgroundColor: "white", "&:hover": { backgroundColor: " red", color: "black", border: "1px solid yellow", }, },

英语不是我的母语，所以可能会出现错误。

Answer 1

模板文字内部不需要常规引号，基本上反引号之间的整个内容都作为字符串处理，除了 ${} 中的值。

假设 props.classes 是一个字符串，我会这样写你的 className：

className={`${classes}.selectionList__sites`}