Отзывчивая маржа с React
В настоящее время я испытываю структурную проблему с React и стилизованными компонентами, из-за которой я не могу найти, казалось бы, хорошее решение для каждого случая.
Вот (довольно простая) проблема:
<Margin top = "10%" left = "5%">
<Card>Some text</Card>
</Margin>
Компонент Margin извлекает настройки полей из компонента Card, чтобы компонент Card можно было повторно использовать в других сценариях. Сам компонент Margin также можно использовать повторно.
Если бы кто-то хотел сделать это отзывчивым, это было бы возможно только с помощью других свойств, таких как topPhone, topTablet и т. д., Что я считаю очень неинтуитивным и трудным для поддержания, если границы отзывчивости когда-либо изменятся.
Итак, что можно сделать, так это скопировать весь контент в разные другие компоненты и отобразить только тот, который в настоящее время подходит (например, компонент MediaQuery response-responseive).
Но в этом случае страница будет иметь много накладных расходов для устройств разных размеров.
Как лучше всего подойти к этому?
Ответы 2
Вы уже проверяли реагирующие носки? Это помогает создавать отзывчивые компоненты React.
<Breakpoint topPhone only>
<div>I will render only in topPhone</div>
</Breakpoint>
<Breakpoint topTablet only>
<div>I will render only in topTablet</div>
</Breakpoint>
Отказ от ответственности: я являюсь автором этой библиотеки.
Вот схема реализации, которую я использую (уменьшенная), она может подойти для вашего случая. Это требует небольшой настройки, но помогает поддерживать гибкие границы (что, я считаю, является основной проблемой).
1) Настройте объект с желаемыми адаптивными границами:
const screenSize = {
sm: 576,
md: 768,
lg: 992,
};
2) Создайте Theme, чтобы помочь преодолеть эти границы через ваше приложение через стилизованные компоненты. Здесь я настроил их с учетом точек останова (медиа-запросов), используя что-то вроде Bootstrap в качестве ориентира (их следует расширить, включив smMin, mdMin и т. д.):
const theme = () => {
return {
xsMax: screenSize.sm - 1 + 'px',
smMax: screenSize.md - 1 + 'px',
mdMax: screenSize.lg - 1 + 'px',
};
};
3) Оберните ваше приложение своим Тема, упомянутая здесь.
render() {
return (
<ThemeProvider theme = {theme}>
<MyApplication />
</ThemeProvider>
)
}
4) На примере Советы и уловки styled-components. Создайте экспортируемый помощник media, чтобы использовать эти точки останова Темы (я покажу только 2 точки останова, но вы должны расширить это, чтобы включить xsDown, smDown, lgUp, mdOnly и т. д.)
export const media = {
smDown: (...args) => css`
@media (max-width: ${({ theme }) => theme.smMax}) {
${css(...args)};
}
`,
mdDown: (...args) => css`
@media (max-width: ${({ theme }) => theme.mdMax}) {
${css(...args)};
}
`,
};
5) import media и используйте его как обычный старый media-query, обертывая ваш отзывчивый стиль:
const MyComponent = styled('section')`
/* Everything to be pink on screens with widths < 768px */
${media.smDown`
* {
background: papayawhip;
}
`};
`;
const MyOtherComponent = styled(‘li’)`
/* Everything to be purple on screens with widths < 992px */
${media.mdDown`
* {
background: purple;
}
`};
`;
Вы можете import media и повторно использовать его в Margin или любом другом компоненте вашего приложения. Отзывчивые границы поддерживаются в одном месте.
Это хорошее решение для медиа-запросов, но не отвечает на мой вопрос. Мне нужно изменить поля, о которых компонент не должен знать. Сам компонент маржи должен быть многоразовым. Поэтому такой подход - не то, что я искал. Прости
Как я описал, подобные подходы приводят к накладным расходам для устройств разных размеров, если вы сравниваете вывод React. Я ищу решение без накладных расходов.