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

Question

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

父.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;

按钮.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>
);

我无法更改颜色。有谁能够帮我

标签： reactjs

Answer 1

而不是buttonType你需要在props这里使用

 [props.buttonType || TYPES.PRIMARY]

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

演示