Создание обертки для Бем компонентов

Привет, подскажите как должен выглядеть блок content() для реализации не что похожего:

Идея своего врапера, который добавляет в эелементы внутри свой класс типа
.Wrapper > content() => children.map.addClass('Wrapper-el)

те имеется блок <Wrapper>, и для всех компонентов внутри (тоже написанные на Бем) к их классам и модификаторам в конце добавить элемент от блока Wrapper.

Еще пример:

<Wrapper>
  <Button />
</Wrapper>

сгенерит, типа:

<div class='Wrapper'>
  <button class='Button Button-checked Wrapper-el' />
</div>

Желательно для react-bem-core.

Спасибо.

7 years ago

Yeti-or

Что то в духе:

decl({
  block: 'Wrapper',
  content({ children }) {
    const { block, elem } = this;
    return React.Children.map(children, child => {
      return React.cloneElement(child, { mix: { block, elem } })
    });
  }
});

А тебе это нужно только для чтобы классы навесить?

7 years ago

vaz9

Спасибо, интересно. Да только для классов, что бы не использовать правила для потомков, типа .parent > .children. Раз все по БЭМчику должно быть.

7 years ago

vaz9

А как мне вызвать elem в блоке Wrapper? Получается Wrapper

import {decl} from 'bem-react-core';
import React from 'react';
import El from 'e:El';

export default decl({
    block: 'Wrapper',

    content({ children }) {
        const { block, elem } = this;
        return React.Children.map(children, (child) => {
            // elem = undefined
            return React.cloneElement(child, { mix: { block, elem } })
        });
    }
});

Wrapper-El:

import {decl} from 'bem-react-core';
import React from 'react';

export default decl({
    block: 'Wrapper',
    elem: 'El',
    tag: 'span'
});

и тк elem - undefined, возвращает малышам .Wrapper

7 years ago

Yeti-or

а ну да сорян this.elem доступен только внутри

Должно так работать

import {decl} from 'bem-react-core';
import React from 'react';
import El from 'e:El';

export default decl({
    block: 'Wrapper',

    content({ children }) {
        return React.Children.map(children, (child) => {
            return React.cloneElement(child, { mix: <El /> })
        });
    }
});

7 years ago

vaz9

Угу, спасибо большое

Чтобы оставлять комментарии, необходимо авторизоваться.

Создание обертки для Бем компонентов | react-bem-core