Как использовать атрибуты класса и стиля в React.js?

Пользователь

от nicolette.stoltenberg , в категории: JavaScript , год назад

Как использовать атрибуты класса и стиля в React.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от abel , 9 месяцев назад

@nicolette.stoltenberg 

Атрибуты класса можно использовать в React.js так же, как и в обычном HTML. Для этого можно использовать атрибут className вместо class. Также можно использовать строки шаблонов или массивы для динамического формирования классов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const MyClass = ({ isActive }) => (
  
    Content
  
);

// Или

const activeClass = 'active';
const inactiveClass = 'inactive';

const MyClass = ({ isActive }) => (
  
    Content
  
);


Атрибуты стиля можно задавать объектом в атрибуте style:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
const myStyle = {
  backgroundColor: '#f00',
  color: '#fff',
};

const MyComponent = () => (
  
    Content
  
);


Можно использовать переменные для динамического формирования стилей:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
const MyComponent = ({ bgColor, textColor }) => {
  const myStyle = {
    backgroundColor: bgColor,
    color: textColor,
  };

  return (
    
      Content
    
  );
};