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

Posted 2023-02-21

【中文标题】如何在扩展组件上覆盖 className？

【英文标题】：How to override className on extended component?

【发布时间】：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;

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

【参考方案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申请多个班级。

这是可能的，这篇文章听起来更像是替代而不是串联。