javascript - 无法使用创建 react 应用程序在 react 中添加类

Question

react 有点新。我使用了创建 react 应用程序 https://github.com/facebook/create-react-app开始一个新的 react 项目。

完整的代码在这里。 https://github.com/bryandellinger/reactswitch/tree/master/src

我试图更改所选元素的背景颜色并将文本变为粗体，但似乎从未添加该类，不确定我做错了什么。

Switch.js

import React, { PropTypes } from 'react';
import  styles from './Switch.css';

const CREDITCARD = 'Creditcard';
const BTC = 'Bitcoin';


const Choice = function (props) {
  const cssClasses = [];

  if (props.active) {
    // <-- check props, not state
    cssClasses.push(styles.active);
  }

  return (
    <div
      onClick={props.onClick}
      className={cssClasses}
    >
      {props.label} {/* <-- allow any label */}
    </div>
  );
};

class Switch extends React.Component {
  state = {
    payMethod: BTC,
  };

  select = (choice) => {
    return (evt) => {
      this.setState({
        payMethod: choice,
      });
    };
  };

  render() {
    return (
      <div className='switch'>
        <Choice
          onClick={this.select(CREDITCARD)}
          active={this.state.payMethod === CREDITCARD}
          label='Pay with Creditcard'
        />

        <Choice
          onClick={this.select(BTC)}
          active={this.state.payMethod === BTC}
          label='Pay with Bitcoin'
        />

        Paying with: {this.state.payMethod}
      </div>
    );
  }
}

export default Switch;

和 Switch.css

.active {
    background-color: #4619eb;
    font-weight: bold; 
  }

看来 switch.css 中的事件类永远不会添加到 onclick 事件上。不确定我错过了什么。

Answer 1

由于 Webpack 在 CRA 中的配置方式，您需要像这样编写 css:

 :local(.active) {
    background-color: #4619eb;
    font-weight: bold; 
  }