Стилизованные компоненты - правильный подход

Question

Я использую стилизованные компоненты в своем проекте.

Рассмотрим следующий фрагмент кода

import { Footer, FooterLeft, FooterRight, NavLink } from './footer_styles';

const FooterView = ({ prop }) => (
  <Footer className="row">
    <FooterLeft>
      &copy;Sample company, LLC
    </FooterLeft>

    <FooterRight>
      <NavLink to="#" className="footer-link">Privacy Policy</NavLink>
      <span className="separator"> | </span>
      <NavLink to="#">Terms &amp; Conditions</NavLink>
    </FooterRight>
  </Footer>
);

Итак, у меня есть следующие вопросы.

1) Могу ли яиспользовать классы начальной загрузки в стилизованных компонентах, как показано в коде?Это правильный подход?Если нет, то как использовать стили начальной загрузки вместе со стилизованными компонентами?

2) Мне нужно создать компонент для каждого элемента в DOM?Например, в показанном коде есть тег span с именем класса «separator», для которого стили добавляются следующим образом:

export const FooterRight = styled.div`
  .separator {
    float: left;
  }
  .footer-link {
    margin-left: 0px;
  }

`;

Является ли этот подход правильным?или

Мне нужно создать отдельный компонент для разделителя?

Я немного запутался здесь.Любая помощь будет оценена.

Answer 1

Вы можете использовать класс начальной загрузки для стиля вашего компонента, в этом нет ничего плохого.Но лучше, если вы используете React Bootstrap, библиотека оптимизирована для React.Например, кнопку раскрывающегося списка вы можете использовать класс начальной загрузки, потому что он будет использовать Jquery для выполнения анимации.Но вы не должны этого делать, потому что Jquery манипулирует реальным DOM, React манипулирует виртуальным DOM, так что это не сказывается на производительности.

Вы можете прочитать больше здесь: https://reactjs.org/docs/integrating-with-other-libraries.html

ОтветТем не менее, с классом для стилизации компонента следует использовать его для сокращения времени на кодирование, а для всего, что связано с Jquery, просто используйте React Component.Я предлагаю вам использовать реагирующий ремень, очень похожий на Bootstrap: https://reactstrap.github.io

Еще одна вещь, есть много способов для стилизации компонента, но я использую модуль CSS, просто нужно создать файл CSS с надстройкойМодуль с именем файла выглядит так:

styleComponent.css --> styleComponent.module.css

А затем импортируйте в свой проект:

import styles from './styleComponent.module.css'

И тогда вы можете стилизовать свой компонент с помощью обычного css:

<div className={styles.separator} >  Hello World </div>

В styleComponent.module.css:

.separator{
height: 20px;
background: black;
}
.separator:hover{
background: white;
}

Управлять проектом проще, поскольку каждый отдельный компонент имеет свой CSS-файл, а className уникален, то есть локально, Webpack будетавтоматически преобразуйте className 'separator' в '2djfas_separator', что решит вашу проблему с именованием класса в CSS.

Надеюсь, это немного поможет вашему проекту !!!