Как правильно передавать класс компоненту?

Question

[Владимир Голубь]

Сейчас делаю так:

Page.js

<Nav
  items={this.state.menuItems}
  className='page__nav'
/>

Nav.js

render() {
        let { items, className } = this.props;

       return(
            <nav className={className + '  nav'}>

Может есть более лучшее способы ?

Comments

[Robur]

Нормальный способ.
Перед тем как искать какой-то другой - определитесь что вас не устраивает в этом. А то может и искать не надо.

Answer 1

[Толстый Лорри]

В идеале компонентного подхода классы извне передавать не нужно. Компонент сам знает, как ему нужно отображаться. Чтобы его спозиционировать - оборачиваем и воздействуем на обёртку.

export function css(...classNames) {
    let result = [];
    for(let i=0; i<classNames.length; ++i) {
        if (Array.isArray(classNames[i])) {
            result = result.concat(classNames[i]);
        } else {
            result.push(classNames[i]);
        }
    }
    return result.join(' ');
}

import * as React from 'react';
import {css} from '../utils.js';

import './MyComponent.scss';
const BLOCK_CSS = 'my-component';
const BLOCK_MODIFIED_CSS = BLOCK_CSS + '--modifier';
const ELEMENT_CSS = BLOCK_CSS + '__element';


export class MyComponent: React.Component {
    ...
    public render() {
        const blockStateCss = [BLOCK_CSS];
        
        if (this.state.modificationNeeded) {
            blockStateCss.push(BLOCK_MODIFIED_CSS);
        }

        return (
            <div className={css(blockStateCss)}>
                <div className={css(ELEMENT_CSS)}>
                    ...
                </div>
            </div>
        );
    }
}

Answer 2

[Антон Спирин]

Единственного правильного способа существует.
Просто почитайте о способах стилизации компонентов React и выберите, тот который больше нравится и лучше подходит для вашего проекта.