时间戳

首页 > 解决方案 > 如何根据内容调整容器的大小而不重复相同的代码行？

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

问题描述

我几乎没有基于某些条件渲染的组件，因此父容器的大小必须更改。

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 个组件的普通容器。

标签： javascriptcssreactjscss-gridstyled-components

解决方案

您只需要定义一个布尔变量来设置是否有附件的标志，然后使用它来设置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>
  );
};

推荐阅读