React实现Tabs组件时出现'styles'未定义(no-undef)错误求助

嘿，这个错误其实一目了然——你在Menu组件的<a>标签里引用了styles.tab，但styles变量根本就没被定义，而且你导入的bootstrap CSS也不能这么用。咱们一步步来修复：

错误原因拆解 #

1. 你导入bootstrap CSS的时候写的是import style from 'bootstrap/dist/css/bootstrap.css';（单数style），但用的时候却写成了styles.tab（复数styles），变量名完全不匹配；
2. 更关键的是：导入全局CSS文件（比如bootstrap的css）并不会得到一个可访问的样式对象，style或者styles在这里根本不是一个包含类名的对象，所以就算变量名对了，这么用也不对。

分场景解决方案 #

场景1：你想添加自定义的CSS模块样式 #

如果styles.tab是你自己写的自定义样式，那需要用CSS Modules来实现：

1. 先在Menu组件的目录下创建一个CSS模块文件，比如命名为Menu.module.css，在里面写你的自定义样式：

.tab {
  /* 示例自定义样式： */
  margin-right: 8px;
  padding: 6px 12px;
  border-radius: 4px 4px 0 0;
}

2. 在Menu组件里正确导入这个CSS模块：

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css'; // 只保留minified版本即可，避免重复导入
import styles from './Menu.module.css'; // 导入CSS模块

3. 现在styles.tab就能正常使用了，同时记得删掉重复的import style from 'bootstrap/dist/css/bootstrap.css';这一行。

场景2：你不需要自定义样式，只是写错了代码 #

如果styles.tab是误写，那直接修改这部分代码：

• 删掉+ styles.tab，或者如果是想添加bootstrap的某个类，直接写类名字符串（比如如果要加tab类，就写"nav-link " + active + " tab"）；
• 同时删掉重复的bootstrap CSS导入，只保留import 'bootstrap/dist/css/bootstrap.min.css';。

修正后的Menu组件代码（场景2示例） #

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import 'bootstrap/dist/css/bootstrap.min.css';

class Menu extends Component {
  render() {
    return(
      <div style={{width:'30%'}}>
        <ul className="nav nav-tabs">
          { this.props.tabs.map(tab => {
            const active = (tab === this.props.selected ? 'active' : '' );
            return (
              <li className="nav-item" key={ tab }>
                {/* 用模板字符串拼接类名更清晰 */}
                <a className={`nav-link ${active}`} onClick={ () => this.props.setSelected(tab) }>
                  { tab }
                </a>
              </li>
            );
          }) }
        </ul>
        {this.props.children}
      </div>
    );
  }
}
export default Menu;

另外提个小建议：拼接类名的时候用ES6模板字符串（比如className={nav-link ${active}}），比字符串加号拼接的可读性要好很多~

内容的提问来源于stack exchange，提问作者C Sharper