Передача имен классов для реагирования компонентов

Ответ 1

В React, когда вы хотите передать интерпретируемое выражение, вам нужно открыть пару фигурных скобок. Попробуйте:

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

Используя classnames пакет npm

import classnames from 'classnames';

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

Ответ 2

Вы также можете сделать это:

class Pill extends React.Component {

  render() {

    return (
      <button { ...this.props }>{ this.props.children }</button>
    );
  }

}

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

Ответ 3

Для справки, для компонентов без гражданства:

// 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 = ( props ) =>
  <div className={ 'some-css-className ${ props.className }' }>
    { props.children }
  </div>

Будет делать:

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

Ответ 4

Для всех, кого это интересует, я столкнулся с этой проблемой при использовании модулей css и отредактировать css-модули.

Большинство компонентов имеют связанный стиль модуля CSS, и в этом примере моя кнопка имеет свой собственный файл css, также как и основной компонент Promo. Но я хочу передать некоторые дополнительные стили кнопке из Промо

Таким образом, кнопка style может выглядеть так:

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} )

В приведенном выше компоненте Button стили Button.css обрабатывают общие стили кнопок. В этом примере только a .button class

Затем в моем компоненте, где я хочу использовать Button, и я также хочу изменить такие вещи, как положение кнопки, я могу установить дополнительные стили в Promo.css и пройти через className опора. В этом примере снова называется классом .button. Я мог бы назвать это чем угодно, например. promoButton.

Конечно, с модулями css этот класс будет .Promo__button___2MVMD, тогда как кнопка одна будет выглядеть как .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} );

Ответ 5

pill ${this.props.styleName} получит "таблетку undefined", если вы не установите реквизит

Я предпочитаю

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

или

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

Ответ 6

Это можно сделать, "интерполируя" имя класса, переданное из родительского компонента дочернему компоненту, с помощью this.props.className. Пример ниже:

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>
  }
}

Ответ 7

Как утверждали другие, используйте интерпретируемое выражение с фигурными фигурными скобками.

Но не забудьте установить значение по умолчанию.
Другие предложили использовать инструкцию OR для установки пустой строки, если она undefined.

Но было бы еще лучше объявить ваш реквизит.

Полный пример:

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: '',
};

Ответ 8

С поддержкой React для интерполяции строк вы можете сделать следующее:

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

Ответ 9

В React 16.6.3 и @Material UI 3.5.1 я использую массивы в className, такие как className={[classes.tableCell, classes.capitalize]}

Попробуйте что-то вроде следующего в вашем случае.

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