Bileşenlere tepki vermek için sınıf adlarının aktarılması

Tarzını değiştirmek için bir sınıf adını bir tepki bileşenine geçirmeye çalışıyorum ve çalışmıyor gibi görünüyorum:

class Pill extends React.Component {

  render() {

    return (
      <button className="pill {this.props.styleName}">{this.props.children}</button>
    );
  }

}

<Pill styleName="skill">Business</Pill>

İlgili stile sahip sınıfın adını geçerek hapın stilini değiştirmeye çalışıyorum. React'te yeniyim, bu yüzden belki de bunu doğru şekilde yapmıyorum. Teşekkürler

React'te, yorumlanmış bir ifadeyi geçmek istediğinizde, bir çift kaşlı ayraç açmanız gerekir. Deneyin:

render () {
  return (
    <button className={`pill ${ this.props.styleName }`}>
      {this.props.children}
    </button>
  );
}

Kullanılması classnames npm paketi

import classnames from 'classnames';

render() {
  return (
    <button className={classnames('pill', this.props.styleName)}>
      {this.props.children}
    </button>
  );
}

Yalnızca referans için, durum bilgisiz bileşenler için:

// ParentComponent.js
import React from 'react';
import { ChildComponent } from '../child/ChildComponent';

export const ParentComponent = () =>
  <div className="parent-component">
    <ChildComponent className="parent-component__child">
      ...
    </ChildComponent>
  </div>

// ChildComponent.js
import React from 'react';

export const ChildComponent = ({ className, children }) =>
  <div className={`some-css-className ${className}`}>
    {children}
  </div>

Oluşturacak:

<div class="parent-component">
  <div class="some-css-className parent-component__child">
    ...
  </div>
</div>

pill ${this.props.styleName} sahne ayarını yapmadığınızda "tanımlanmamış hap" alacak

tercih ederim

className={ "pill " + ( this.props.styleName || "") }

veya

className={ "pill " + ( this.props.styleName ? this.props.styleName : "") }

İlgilenen herkes için, css modüllerini kullanırken ve css modüllerine tepki verirken aynı sorunu yaşadım .

Çoğu bileşenin ilişkili bir css modülü stili vardır ve bu örnekte , Promo ana bileşeninde olduğu gibi Button'ım kendi css dosyasına sahiptir . Ama bazı ek stiller geçmek istiyorum Düğme gelen Promo

Böylece stylemümkün Düğme şuna benzer:

Button.js

import React, { Component } from 'react'
import CSSModules from 'react-css-modules'
import styles from './Button.css'

class Button extends Component {

  render() {

    let button = null,
        className = ''

    if(this.props.className !== undefined){
        className = this.props.className
    }

    button = (
      <button className={className} styleName='button'>
        {this.props.children}
      </button>
    )

    return (
        button
    );
  }
};

export default CSSModules(Button, styles, {allowMultiple: true} )

Yukarıdaki Button bileşeninde Button.css stilleri ortak düğme stillerini ele alır. Bu örnekte sadece bir .buttonsınıf

Ardından, Düğmeyi kullanmak istediğim bileşenimde ve ayrıca düğmenin konumu gibi şeyleri değiştirmek istiyorum, ek stiller ayarlayabilir Promo.cssve classNamedestek olarak geçebilirim . Bu örnekte yine .buttonsınıf denir . Örneğin buna herhangi bir şey diyebilirdim promoButton.

Tabii ki css modülleri ile bu sınıf olacaktır, .Promo__button___2MVMDoysa birinci düğme gibi bir şey olacaktır..Button__button___3972N

Promo.js

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './Promo.css';

import Button from './Button/Button'

class Promo extends Component {

  render() {

    return (
        <div styleName='promo' >
          <h1>Testing the button</h1>
          <Button className={styles.button} >
            <span>Hello button</span>
          </Button>
        </div>
      </Block>
    );
  }
};

export default CSSModules(Promo, styles, {allowMultiple: true} );

Diğerlerinin de belirttiği gibi, kaşlı ayraçlar içeren yorumlanmış bir ifade kullanın.

Ancak bir varsayılan ayarlamayı unutmayın.
Diğerleri, eğer boş bir dizge ayarlamak için bir VEYA ifadesi kullanmayı önerdi undefined.

Ancak, Dikmelerinizi ilan etmeniz daha da iyi olur.

Tam örnek:

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class Pill extends Component {

  render() {

    return (
      <button className={`pill ${ this.props.className }`}>{this.props.children}</button>
    );
  }

}

Pill.propTypes = {
  className: PropTypes.string,
};

Pill.defaultProps = {
  className: '',
};

Bunu, ana bileşenden alt bileşene iletilen className'i kullanarak "enterpolasyon yaparak" elde edebilirsiniz this.props.className. Aşağıdaki örnek:

export default class ParentComponent extends React.Component {
  render(){
    return <ChildComponent className="your-modifier-class" />
  }
}

export default class ChildComponent extends React.Component {
  render(){
    return <div className={"original-class " + this.props.className}></div>
  }
}

React 16.6.3 ve @Material UI 3.5.1 ile, className'deki gibi dizileri kullanıyorum className={[classes.tableCell, classes.capitalize]}

Sizin durumunuzda aşağıdakine benzer bir şey deneyin.

class Pill extends React.Component {
    render() {
        return (
           <button className={['pill', this.props.styleName]}>{this.props.children}</button>
        );
    }
}

React'in dize enterpolasyonu desteği ile aşağıdakileri yapabilirsiniz:

class Pill extends React.Component {
    render() {
       return (
          <button className={`pill ${this.props.styleName}`}>{this.props.children}</button>
       );
    }
}

Typescript'te HTMLAttributesve türlerini belirlemeniz gerekir React.FunctionComponent.

Çoğu durumda, onu başka bir arayüz veya türe genişletmeniz gerekecektir.

const List: React.FunctionComponent<ListProps &
  React.HTMLAttributes<HTMLDivElement>> = (
  props: ListProps & React.HTMLAttributes<HTMLDivElement>
) => {
  return (
    <div className={props.className}>
      <img className="mr-3" src={props.icon} alt="" />
      {props.context}
    </div>
  );
};

interface ListProps {
  context: string;
  icon: string;
}