Стилизованные компоненты - правильный подход
Я использую в своем проекте стилизованные компоненты.
Рассмотрим следующий фрагмент кода
import { Footer, FooterLeft, FooterRight, NavLink } from './footer_styles';
const FooterView = ({ prop }) => (
<Footer className = "row">
<FooterLeft>
©Sample company, LLC
</FooterLeft>
<FooterRight>
<NavLink to = "#" className = "footer-link">Privacy Policy</NavLink>
<span className = "separator"> | </span>
<NavLink to = "#">Terms & Conditions</NavLink>
</FooterRight>
</Footer>
);
Итак, у меня есть следующие вопросы.
1) Могу ли я использовать классы начальной загрузки в стилизованных компонентах, как показано в коде? Это правильный подход? Если нет, как использовать стили начальной загрузки вместе со стилизованными компонентами?
2) Нужно ли мне создавать компонент для каждого элемента в dom? Например, в показанном коде есть тег диапазона с именем класса "separator", для которого стили добавляются следующим образом.
export const FooterRight = styled.div`
.separator {
float: left;
}
.footer-link {
margin-left: 0px;
}
`;
Это правильный подход? или
Нужно ли мне создавать отдельный компонент для разделителя?
Я здесь немного запутался. Любая помощь будет оценена.
Ответы 1
Вы можете использовать класс начальной загрузки для стилизации вашего компонента, в этом нет ничего плохого. Но лучше, если вы используете React Bootstrap, библиотеку, оптимизированную для React. Например, раскрывающаяся кнопка вы можете использовать класс начальной загрузки, потому что он будет использовать JQuery для выполнения анимации. Но вы не должны этого делать, потому что JQuery манипулирует реальной DOM, React манипулирует виртуальной DOM, поэтому это не очень хорошо для производительности.
Подробнее читайте здесь: https://reactjs.org/docs/integrating-with-other-libraries.html
Ответ по-прежнему да, с классом для стилизации компонента, следует использовать его для сокращения времени на кодирование, со всем, что связано с JQuery, просто используйте компонент React. Я предлагаю вам использовать responsestrap, очень похожий на 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.
Надеюсь, это немного поможет вашему проекту !!!