Question

我试图在某个页面上以不同的方式定位此组件。但是当我向它提供另一个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;

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

Answer 1

由于I am now building a query statement by using string buffer according to condition it is working.. if value is not null then I am appending it into the query else I am not appending.. one section is like this.. StringBuffer queryBuff = new StringBuffer(); queryBuff .append("select * from table_name where"); try { if ((dateFromStr != null && dateFromStr != "") && (dateToStr != null && dateToStr != "")) { dateFrom = df.parse(dateFromStr); dateTo = df.parse(dateToStr); queryBuff.append(" transaction_date between " + "\'" + dateFrom + "\'" + "and" + "\'" + dateTo + "\'"); } else { queryBuff.append(""); } } catch (ParseException e) { // TODO Auto-generated catch block e.printStackTrace(); } if (materialName != null && materialName != "") { if ((dateFromStr == null || dateFromStr == "") && (dateToStr == null || dateToStr == "")) { queryBuff.append(" material=" + "\'" + materialName + "\'"); } else { queryBuff.append(" and "); queryBuff.append(" material=" + "\'" + materialName + "\'"); } }是自定义组件，您可以手动传递<Label>道具。

这是 default props！

的一个很好的用例

className

这样，如果class Label extends Component { render() { return ( <div className={this.props.className} /> ); } } Label.defaultProps = { className: styles.labelClass }没有提供className，则会使用Label样式，否则会使用道具。

Answer 2

您需要明确引用className道具中的Label属性 - 尝试：

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;

Answer 3

我通过向组件添加另一个可选属性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;

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

3 个答案: