如何在扩展组件上覆盖 className？答案

【问题标题】：How to override className on extended component?如何在扩展组件上覆盖 className？
【发布时间】：2017-04-16 03:25:39
【问题描述】：

我试图在某个页面上以不同的方式定位此组件。但是当我为它提供另一个 className 属性时，它只使用在声明组件时提供的原始类的样式。

组件：

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {
    return (
      <div className={styles.labelClass} />
    );
  }
}

export default Label;

我想以不同方式定位的页面：

import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';

class Page extends Component {

  render() {
    return (
      <div>
          <Label className={styles.positionLeft} />
      </div>
    );
  }

}

export default Page;

通常我会使用自定义样式来执行此操作，但我必须使用媒体查询，所以在这种情况下这是不可能的。

【问题讨论】：

标签： javascript css reactjs

【解决方案1】：

我通过向组件添加另一个可选属性 customClass 来修复它。

标签

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {
    return (
      <div className={styles.labelClass + ' ' + this.props.customClass} />
    );
  }
}

export default Label;

页面

import React, { Component } from 'react';
import styles from './page.css';
import Label from '../common/label.jsx';

class Page extends Component {

  render() {
    return (
      <div>
          <Label customClass={styles.positionLeft} />
      </div>
    );
  }

}

export default Page;

【讨论】：

【解决方案2】：

您需要从 Label 的 props 中显式引用 className 属性 - 尝试：

import React, { Component } from 'react';
import styles from './label.css';

class Label extends Component {
  render() {

    let { className } = this.props

    if (!className) {
      className = styles.labelClass
    }

    return (
      <div className={className} />
    );
  }
}

export default Label;

【讨论】：

有效答案，但您基本上已经创建了 defaultProps 的手动实现。
在我写完我的答案后，我看到了你的答案——我确实看到了！我猜你每天都会学到一些新东西...... *去重构代码库*
哈哈，我知道是对的......令人惊讶的是，有多少未得到充分利用和未知。我记得当我写了自己的 Promise.all ??

【解决方案3】：

由于<Label> 是自定义组件，您可以手动向下传递className 属性。

这是 default props!

的一个很好的用例

class Label extends Component {
  render() {
    return (
      <div className={this.props.className} />
    );
  }
}

Label.defaultProps = {
  className: styles.labelClass
}

这样，如果Label没有提供className，它将使用labelClass样式，否则，它将使用prop。

【讨论】：

或者使用classnames申请多个班级。
这是可能的，这篇文章听起来更像是替代而不是串联。