如何根据内容调整容器的大小而不重复相同的代码行？

Question

我很少根据某些条件渲染组件，因此必须更改父容器的大小。

export const Container = styled.div`
  display: grid;
  font-family: Nunito Sans;
  padding: 32px 40px 80px 80px;
  background-color: transparent;
  grid-template-columns: 980px;
  grid-template-rows: 40px minmax(64px, max-content);
  ${props =>
    props.extra &&
    css`
      grid-template-rows: 40px min-content minmax(64px, max-content);
  `};
  grid-row-gap: 16px;
`;

我正在添加道具extra，以便根据组件的添加来更改容器的大小。

renderData = () => {

  const attachments = [a, b, c, d, e];

  if ( attachments.length > 0 ) {
    return ( 
      <Container extra>
        <DetailsHeader  />
        <DetailsAttachments attachments={attachments} />
        <DetailsMisc />
       </Container>
    )
  } 
  return (
    <Container>
      <DetailsHeader  />
      <DetailsMisc />
    </Container>
  )
};

因此，在上面的代码中，大多数代码行都是重复的。

基本上，如果附件数组中有项目，则仅显示组件DetailsAttachments，否则显示具有2个组件的普通容器。

Answer 1

[您只需要定义一个布尔变量以在是否有附件的情况下有一个标志，然后使用它来设置extra属性并像这样渲染或不显示DetailsAttachments组件：

renderData = () => {
  const attachments = [a, b, c, d, e];

  // Define a flag to easy check if attachments has elements
  const extra = attachments.length > 0;

  return (
    <Container extra={extra}>
      <DetailsHeader/>
      {extra && <DetailsAttachments attachments={attachments} />}
      <DetailsMisc />
    </Container>
  );
};