React & BEM: one more collaboration. [email protected]

App-Header.js

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

export default decl({
  block: 'App',
  elem: 'Header',
  attrs: {
    role: 'heading'
  },
  content() {
    return 'я заголовок';
  }
});

[email protected]

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

export default decl({
  block: 'App',
  elem: 'Header',
  tag: 'h1',
  attrs() {
    return {
      ...this.__base(...arguments),
      'aria-level': 1
    },
  },
  content() {
    return `А ${this.__base(...arguments)} на десктопах превращаюсь в h1`;
  }
});

[email protected]

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

export default decl({
  block: 'App',
  elem: 'Header',
  tag: 'h2',
  content() {
    return `А ${this.__base(...arguments)} на тачах`;
  }
});

index.js

import ReactDomServer from 'react-dom/server';
import AppHeader from 'b:App e:Header';

ReactDomServer.renderToStaticMarkup(<AppHeader />);

[email protected]

<h1 class="App-Header" role="heading" aria-level="1">A я заголовок на десктопах превращаюсь в h1</h2>

[email protected]

<h2 class="App-Header" role="heading">я заголовок на тачах</h2>