Как добавить класс через rest?

Question

[Jedi]

function Button({children, ...rest}) {
    return (
        <button className="great-button">
            {children}
        </button>
    );
}

Если попробовать так, логично, что не получится

function Button({children, ...rest}) {
    return (
        <button {...rest} className="great-button">
            {children}
        </button>
    );
}

Как можно правильно добавить класс к button не теряя уже существующий .great-button?

Answer 1

[0xD34F]

const Button = ({ children, className = '', ...rest }) => (
  <button {...rest} className={`button ${className}`}>
    {children}
  </button>
);

Comments

[Jedi]

Спасибо большое за ответ!

Думал реализовать таким образом, но не был уверен в его правильности.

А почему прописываем className = ''?
({ children, className = '', ...rest })

[Фёдор]

Jedi, в теории ты в class.Name запишешь значение класса great-button

Answer 2

[Vladimir Lewandowski]

Лучше использовать библиотеки типа classnames.

const Button = ({ children, className, ...rest }) => (
  <button {...rest} className={classnames('great-button', className)}>
    {children}
  </button>
);