Question

我在react中创建了一个按钮组件。功能正常，但我无法更改按钮的颜色和样式

parent.js

import React, { Component } from "react";
import {Button, TYPES} from '../../../Global/button';

class ProductDisplay extends Component{
  render(){
    return(
      <Button buttonType={TYPES.DANGER} label="Add To Cart" onClick={() => 
        this.addItemToCart(pdpList.uniqueID)}></Button>
    )
  }
}

export default ProductDisplay;

button.js

import React from 'react';
import classnames from 'classnames';
export const TYPES = {
  PRIMARY: 'btn-primary',
  WARNING: 'btn-warning',
  DANGER: 'btn-danger',
  SUCCESS: 'btn-success',
}

export const Button = (props) => (
  <button buttonType={props.TYPES} onClick={props.onClick} classnames={ 
   [props.buttonType || TYPES.PRIMARY] 
  }>
    {props.label} 
  </button>
);

我无法更改颜色。有人可以帮助我

Answer 1

您需要在此处使用buttonType而不是props

 [props.buttonType || TYPES.PRIMARY]

您已经从父组件传递了buttonType。

Demo

Answer 2

在button.js中：

export const Button = (props) => (
  <button
    onClick={props.onClick}
    className={styles[props.buttonType || TYPES.PRIMARY]} 
  >
    {props.label} 
  </button>
);

请记住，类的道具名称是单数和驼峰字母，即className而不是classnames。

通用按钮可重用性无法在ReactJS中实现

2 个答案: