Блог

Главная - Вопросы по программированию - Передача нескольких анонимных реквизитов

Передача нескольких анонимных реквизитов

#reactjs #styled-components

#reactjs #styled-компоненты

Вопрос:

Я использую библиотеку «styled-components» для создания своего компонента button.

В настоящее время моя настройка стилизованного компонента выглядит следующим образом

 import React from "react";
import classNames from "classnames";

const Button = (props) => {
  const btnClass = classNames("btn", {
    disabled: props.disabled === "disabled",
    [`btn--${props.type}`]: props.type,
  });

  return (
    <button className={btnClass} type="button" onClick={props.click}>
      {props.content}
    </button>
  );
};

export default Button;

И тогда я могу назвать это так.

 <Button
 content="Button"
 click={handleSelect}
 type="primary"
 disabled
            />

Я делаю это таким образом, потому что хочу интегрировать styled-components с моей существующей таблицей стилей. Считается ли хорошей практикой то, что я делаю (переписываю стандартный html в компоненты)? На мой взгляд, это делает базу кода более понятной.

Однако мой главный вопрос заключается в том, как я могу сделать несколько реквизитов раздражающими?

Я бы хотел передать кнопку вот так…

 <Button 
 primary
 disabled
 content="Button"
 click={handleSelect}
/>

Комментарии:

1. Интегрировать styled-components с вашим css? Это звучит как очень плохая идея.

2. Мне нужно использовать базовую таблицу стилей, и я хотел начать использовать stylecomponents, css в js. Следует ли этого избегать из-за существующей таблицы стилей?

3. Если вам нужна базовая таблица стилей, используйте GlobalStyles вместо этого. Вы можете найти это в документах sc.

4. вы видите эту песочницу для ссылок.