Question

我想根据收到的道具用不同的CSS渲染Frame组件。

每种“框架类型”没有太多共同点。使每种Frame类型成为一个单独的组件会更好吗？还是有一种更好的方法来构造这种结构，使它不那么肿？

Frame.js

import {
  NavFrame,
  SidepanelFrame,
  HomeFrame,
  MobileSidepanelFrame,
  MapFrame,
} from "./FrameStyles";

export default function Frame(props) {
  return props.nav ? (
    <NavFrame>{props.children}</NavFrame>
  ) : props.home ? (
    <HomeFrame>{props.children}</HomeFrame>
  ) : props.sidepanel ? (
    <SidepanelFrame>{props.children}</SidepanelFrame>
  ) : props.mobileSidepanel ? (
    <MobileSidepanelFrame>{props.children}</MobileSidepanelFrame>
  ) : props.map ? (
    <MapFrame>{props.children}</MapFrame>
  ) : (
    <div />
  );
}

FrameStyles.js

export const MobileSidepanelFrame = styled.div`
  grid-area: sidepanel;
  display: flex;
  align-items: center;

  background-color: white;

  z-index: 2;
`;

export const HomeFrame = styled.div`
  height: 100%;
  display: grid;

  grid-template-rows: 0.175fr 0.08fr 0.24fr 0.36fr 0.08fr 0.065fr;
  grid-row-gap: 0.5rem;
`;

export const MapFrame = styled.div`
  grid-area: map;
  height: auto;

[...]

`;

父组件

   <Frame sidepanel>
      {props.children}
    </Frame>

Answer 1

您不需要单独的样式化组件甚至功能组件。您只需要一个带有一个字符串属性的样式化组件。您可以使用函数根据每种类型（变体）来组合样式。

const home = props => {
  if (props.variant !== "home") return css``;

  return css`
    display: grid;
    height: 100%;
  `;
};

const map = props => {
  if (props.variant !== "map") return css``;

  return css`
    height: auto;
    grid-area: map;
  `;
};

const Frame = styled.div`
  ${home};
  ${map};
`;

然后您可以像这样使用它：

<Frame variant="home">
  <p>Your home content</p>
</Frame>

动态设置样式化组件的更好方法-反应样式化组件

1 个答案: