Question

在我的项目中，我有一个Text组件：

import React from 'react'
import { bool, string, number, element, func, object, any } from 'prop-types'
import cx from 'classnames'
import s from './styles/Text.css'


const Text = (props) => {
  const renderMultiLines = () => {
    const items = props.children.split(' ')
    return items.map(text => <div style={{ marginBottom: '2px' }} className={s.multiLineItem}>{text}</div>)
  }

  return (
    <div
      className={cx(
        s.text,
        props.ellipsis && s.ellipsis,
        props.isUpperCase && s.isUpperCase,
        props.isBold && s.bold,
        props.isExtraBold && s.extraBold,
        props.isExtraSpaced && s.extraSpaced,
        props.multiLine && s.multiLine,
        props.active && s.underlined,
        props.active && s.primary,
        s[props.color],
        s[props.size],
      )}
      onClick={props.onClick}
      style={props.style}
    >
      {!props.multiLine && props.children}
      {props.multiLine && renderMultiLines()}
    </div>
  )
}

Text.defaultProps = {
  isBold: false,
  isExtraSpaced: false,
  isExtraBold: false,
  children: '',
  color: '',
  ellipsis: false,
  size: 'extraExtraSmall',
  isUpperCase: false,
  onClick: undefined,
  style: {},
  active: false,
}

Text.propTypes = {
  isBold: bool,
  isExtraSpaced: bool,
  isExtraBold: bool,
  children: any,
  color: string,
  ellipsis: bool,
  size: string,
  isUpperCase: bool,
  onClick: func,
  style: object,
  active: bool,
}

export default Text

正如您所看到的，目的是传递道具来改变文本的布局。

我们的想法是，您最终只能获得有限数量的文字样式，而且您的结果从未发生过变化。

在我的项目中使用此组件的示例如下所示：

<Text
  onClick={() => this.handleGlobalChangeDate(Number(n))}
  isBold
  size="medium"
  color="primary"
  active={Number(n) === activeDay && visibleMonth === activeMonth}
>{n}</Text>

这看起来很混乱，我觉得isBold，size，color等不需要在这里显示并作为道具传递。相反，它们应该在CSS中处理并引用项目的variables.css文件。

通过这种方式，我希望能够将className附加到相关的Text组件中。

但是，因为它是一个组件而不仅仅是div，所以className只会作为道具传递给组件。

如何使用CSS来处理此问题，而不是使用多种与样式相关的道具？

Answer 1

尝试classnames，这是一种基于道具或状态动态添加类的好方法。

你可以这样做：

var btnClass = classNames({
  btn: true,
  'btn-pressed': this.state.isPressed,
  'btn-over': !this.state.isPressed && this.state.isHovered
});
return <button className={btnClass}>{this.props.label}</button>;

然后在您的组件中应用：

<div className={btnClass}>Something</div>

使用CSS模块预防大量与样式相关的React道具

1 个答案: