Возможно ли в react-компонентах использовать микс классов по БЭМ?

Question

[Константин Башаркевич]

Согласно БЭМ, для модификации стилей какого-либо блока, при его нахождении внутри другого блока используется микс стилей блока и элемента. Возможен ли такой подход, если вложенный блок представлен react-компонентом? Например:

class Avatar extends React.Component {
  render() {
    return (
      <img className="avatar" src={this.props.user.avatarUrl} alt={this.props.user.name} />
    );
  }
}

class UserInfo extends React.Component {
  render() {
    return (
      <div className="user-info">
        <Avatar user={this.props.user} /> 
        <div className="user-info__name">{this.props.user.name}</div>
      </div>
    );
  }
}

Возможно ли, чтобы у компонента Avatar внутри компонента UserInfo был микс классов avatar и user-info__avatar?

Comments

[Максим]

не совсем понятен вопрос. Вы же можете любые стили написать в рендере.

[Константин Башаркевич]

Максим: дополнил вопрос

[Максим]

Константин Башаркевич: вопрос о том, как это не писать руками, а чтобы делалось автоматически? (если да - не знаю ответа, к сожалению. Может уже кто-то делал подобное и есть в npm?)

[Константин Башаркевич]

Максим: нет, вопрос о том, как это написать хотя бы руками, я просто нуб в реакте и не вижу возможности указать css-класс у компонента

Answer 1

[Никита Гущин]

Если я вас правильно понял:

class Avatar extends React.Component {
  render() {
    const finalClassName = 'avatar ' + (this.props.className || '')
    return (
      <img className={finalClassName} src={this.props.user.avatarUrl} alt={this.props.user.name} />
    );
  }
}


class UserInfo extends React.Component {
  render() {
    return (
      <div className="user-info">
        <Avatar className="user-info__avatar" user={this.props.user} /> 
        <div className="user-info__name">{this.props.user.name}</div>
      </div>
    );
  }
}

Т.е. просто передавайте className как props компоненту Avatar, затем объединяйте в один классНейм:

// выражение в скобочках нужно, чтобы не получилось 'avatar undefined', когда className не передан.
// Я рекомендую указать className, равное '', в defaultProps компонента Avatar
const finalClassName = 'avatar ' + (this.props.className || '')

Также в npm есть удобный пакет https://www.npmjs.com/package/classnames , который позволяет формировать строку с классами. Ваш пример выглядел бы так:

const finalClassName = classnames({
  'avatar': true,
  [this.props.className]: !!this.props.className,
  'some-other-class': someCondition
})

Comments

[Константин Башаркевич]

И так в каждом компоненте?

[Никита Гущин]

Константин Башаркевич: да, ведь реакт не знает где и как вы хотите применить переданный класс.

[Константин Башаркевич]

Спасибо конечно, я подумаю насчет такой практики, быть может есть решения проблемы каскадности стилей совершенно иного плана, без БЭМ, более свойственные react-компонентам?

[Никита Гущин]

Константин Башаркевич: так БЭМ тут не причем. Если вам надо передать класс в компонент - делайте так. А остальное уже зависит от вашего css: либо .avatar.user-info__avatar, либо .user-info .avatar

[Константин Башаркевич]

БЭМ решает проблему каскадности, чтобы как раз не писать .user-info .avatar, пишут .user-info__avatar, потому как для сложных структур мало ли что может попасть под селектор .user-info .avatar. Вот мне как новичку в реакте и интересно, какие еще есть инструменты для решения проблемы каскадности стилей. Ваш прием конечно будет работать, спасибо, но такая практика выглядит не очень красиво.

[Никита Гущин]

Константин Башаркевич: других вариантов нету особо. Можно написать обертку className={concatClasses('avatar', this.props.className)} , но, примерно, одно и то же