ReactJS 中的 Css 模块，使用三元运算符语法

【问题标题】：Css module in ReactJS, using in ternary operators syntaxReactJS 中的 Css 模块，使用三元运算符语法
【发布时间】：2022-02-12 03:13:52
【问题描述】：

我有一个 useState 并尝试基于它渲染我的模态窗口。这是我的代码，我为我的课程使用了 css 模块。问题是我找不到这样做的正确语法。我最终写了这个，但它不起作用。

export default function Modal({ content }) {
  const [showModal, setShowModal] = useState(true);

  return (
    <div className={`${showModal} ? ${styles.ModalWindow} : ${styles.DisplayNone}`} </div>

【问题讨论】：

标签： css reactjs

【解决方案1】：

反引号 (`) 符号表示 JavaScript 中的 template literal/string。如果您希望该类字面上类似于“条件？窗口类：隐藏”，您只会想使用此功能。

在这种情况下，您希望计算表达式，而不是转换为字符串文字。所以只需摆脱那些模板文字标记：

<div className={showModal ? styles.ModalWindow : styles.DisplayNone} </div>

【讨论】：