在反应选项卡上设置（棘手的）活动 class

Question

我有一些非常基本的 React 选项卡：

  const tabItems = ['Tab 1', 'Tab 2'];

  function TabGroup() {
    const [activeItem, setActive] = useState(tabItems[0]);
    return (
      <>      
        <div className={styles.tabs}>
          {tabItems.map(tabItem => (
            <button
              className={activeItem === tabItem ? "on" : "off"}
              onClick={() => setActive(tabItem)}
            >
              {tabItem}
            </button>
          ))}
        </div>
        <p>Active Tab: {activeItem} </p>
      </>
    );
  }

工作正常，但我们的项目使用 CSS 的模块，在文件顶部像这样导入：

import styles from 'styles/wallet.module.scss'

从 wallet.module.scss 调用 CSS class 意味着您必须像这样引用它们：

<div className={styles.foo}></div>

所以我的问题是...回到我的选项卡的原始示例，我需要 activeItem 的 className 来获取类似 {styles.on} 的内容，例如；

        <button
          className={activeItem === tabItem ? {styles.on} : {styles.off}}
          onClick={() => setActive(tabItem)}
        >

但是在 activeItem == tabItem 检查中这样调用它们会引发错误：

./components/wallet.js
Error: 
  x Unexpected token `.`. Expected ... , *,  (, [, :, , ?, = or an identifier
    ,----
 24 | className={activeItem === tabItem ? {styles.on} : {styles.off}}
    :                                            ^
    `----

Caused by:
    0: failed to process input file
    1: Syntax Error

我已经尝试了各种输入方式，但不确定哪种语法魔术可以让我在这里得到我想要的东西？有什么想法吗？

谢谢！

Answer 1

我真是个白痴。您只是不能包含大括号。

这个有效：

        <button
          className={activeItem === tabItem ? styles.on : styles.off}
          onClick={() => setActive(tabItem)}
        >

Answer 2

尝试移除样式周围的括号。

 className={activeItem === tabItem ? styles.on : styles.off}

第一组花括号表示jsx。

在反应选项卡上设置（棘手的）活动 class

Setting a (tricky) active class on react tabs

tabs

reactjs