Как настроить размер контейнера на основе содержимого, не повторяя те же строки кода?

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>
  );
};