Question

我目前正在使用React和样式化组件遇到结构性问题，在这些情况下我找不到适合每种情况的看似好的解决方案。

这是（很简单）问题：

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

Margin组件从Card组件提取边距设置，以便Card组件可以在其他情况下重用。 Margin组件本身也可以重复使用。

但是，如果要使这种响应成为可能，则只能通过topPhone，topTablet等不同的道具来实现，如果响应界限过大，我发现它们很不直观并且很难维护改变。

因此，人们可以做的就是将所有内容复制到其他不同的组件中，并仅显示当前适合的组件（例如，react-sensitive的MediaQuery组件）。

但是在这种情况下，不同设备尺寸的页面将有很多开销。

解决这个问题的最佳方法是什么？

Answer 1

以下是我使用的实施概述（略过），它可能适合您的情况。它涉及一些设置，但有助于保持响应边界的可维护性（我认为这是主要问题）。

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）用您的Theme as mention here包装您的应用程序。

render() {
  return (
    <ThemeProvider theme={theme}>
      <MyApplication />
    </ThemeProvider>
  )
}

4）以styled-components’ tips-and-tricks为例。创建一个可导出的media助手，以利用这些主题断点（我将仅说明两个断点，但是您应该将其扩展为包括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或应用程序中的任何其他组件中重复使用。响应边界保持在一个地方。

Answer 2

您是否已签出react-socks？它有助于构建响应式的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>

免责声明：我是该库的作者。

React的保证金

2 个答案: