Отзывчивые поля с React - PullRequest
Новая
       24

Отзывчивые поля с React

0 голосов
/ 11 декабря 2018

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

Вот (довольно простая) проблема: 

<Margin top="10%" left="5%">
    <Card>Some text</Card>
</Margin>

Компонент Margin извлекает настройки полей из компонента Card, чтобы компонент Card можно было повторно использовать в других сценариях.* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Margin * * * * * * * * *.не интуитивно понятно и трудно поддерживать, если когда-либо изменяются границы реагирования.

Так что можно сделать, скопировать весь контент в другие компоненты и отобразить только тот, который в настоящее время подходит (например, компонент MediaQuery реагирующего реагирования).

Но в этом случае на странице может быть много служебной информации для устройств разных размеров.

Как лучше всего подойти к этому?

Ответы [ 2 ]

0 голосов
/ 20 декабря 2018

Вот схема реализации, которую я использую (уменьшенная), она может соответствовать вашему случаю.Он включает в себя небольшую настройку, но помогает поддерживать управляемые границы реагирования (что, я считаю, является главной задачей).

1) Настройте объект с желаемыми границами реагирования: 

const screenSize = {
  sm: 576,
  md: 768,
  lg: 992,
};

2)Создайте Theme, чтобы помочь преодолеть эти границы через ваше приложение через styled-компоненты.Здесь я настроил их с учетом точек останова (медиа-запросов), используя в качестве руководства что-то вроде 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) Используя tips-and-tricks * 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 или любом другом компоненте вашего приложения.Адаптивные границы поддерживаются в одном месте.

0 голосов
/ 11 декабря 2018

Вы уже проверили реагирующие носки еще?Это помогает создавать отзывчивые компоненты 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>

Отказ от ответственности: я являюсь автором этой библиотеки.

...