Question

我正在尝试使用Radium编写干净和干燥的代码样式。这就是我的按钮到目前为止。

/**
*
* Button
*
*/

import React, { PropTypes } from 'react';
import Radium from 'radium';

const styles = {
  base: {
    borderRadius: '3px',
    backgroundColor: '#23cdf4',
    fontSize: '13px',
  },
  primaryBlue: {
    backgroundColor: '#23cdf4',
  },
  primaryBlueBig: {
    borderRadius: '8px',
    fontSize: '16px',
    padding: '14px 28px',
  },
  primaryRed: {
    backgroundColor: '#F99CAC',
  },
};

class Button extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <button
        style={[styles.base, styles[this.props.type], this.props.style]}
      >
        {text}
      </button>
    );
  }
}

Button.propTypes = {
  text: PropTypes.any,
  type: PropTypes.oneOf(['primaryBlue', 'primaryBlueBig']).isRequired,
  style: PropTypes.object,
  disabled: PropTypes.bool,
};

export default Radium(Button);

我无法弄清楚的两件事：

如何将primaryBlue使用的背景颜色扩展到primaryBlueBig而不重复自己？
如果禁用是真的话，如何更改两个蓝色按钮的背景颜色？

这是我目前正在使用的精简版本，并试图摆脱渲染功能中的巨大if else块。谢谢！ ^。^

Answer 1

您可以使用modifiers。

这基本上就是你已经在做的事情，但需要更多的重构。

我会以不同的方式定义样式：

const styles = {
  base: {
    borderRadius: '3px',
    backgroundColor: '#ffffff',
    fontSize: '13px',
  },

  primaryBlue: {
    backgroundColor: '#23cdf4',
  },
  primaryRed: {
    backgroundColor: '#F99CAC',
  },

  big: {
    borderRadius: '8px',
    fontSize: '16px',
    padding: '14px 28px',
  },

  disabled: {
    primaryBlue: {
      backgroundColor: '#eeeeee',
    },
    primaryRed: {
      backgroundColor: '#eff0f1',
    }
  }
};

然后你可以拥有big和disabled道具。

return (
  <button
    style={[
      styles.base,
      styles[this.props.type],
      this.props.big && styles.big,
      this.props.disabled && styles.disabled[this.props.type]
    ]}>
    {text}
  </button>
);

React Radium Class Style Overrides

1 个答案: