Question

我有两个对象incs和exps，每个都有以下属性：desc，amount和id。我想将一个容器中每个对象的详细信息显示为列表，并且两个容器并排放置。我是这样做的

const Details = props => {
  return (
    <div className={styles.container}>
      <div className={styles.detailsItem}>
        <ul>
          {props.balance.incs.map(inc => (
            <DetailsItem item={inc} key={inc.id}/>
          ))}
        </ul>
      </div>

      <div className={styles.detailsItem}>
        <ul>
          {props.balance.exps.map(exp => (
            <DetailsItem item={exp} key={exp.id}/>
          ))}
        </ul>
      </div>
    </div>
  );
};

其中DetailsItem.js由

给出

const DetailsItem = ({item}) => {
  return (
    <li className={styles.listItem}>
      <div>{item.desc}</div>
      <div>{item.amount}</div>
    </li>
  )
}

.scss文件是

.container {
  width: 80%;
  max-width: 800px;
  margin: 1rem auto;
  padding: 1rem 0;
  text-align: center;
  display: flex;
  justify-content: space-around;
  .detailsItem {
    width: 49%;
    background: #eee;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.7);
    h2{
      text-transform: uppercase;
      letter-spacing: 2px;
    }
    .listItem {
      display: flex;
      justify-content: space-around;
      align-items: center;
      font-size: 2rem;
      padding: 0.5rem 0;
    }
    li:nth-child(even) {
      background: rgb(219, 217, 217);
    }
  }
}

对象incs和exps通过表单填充。但是，当我添加一个incs条目时，exps容器将增长相同的数量incs容器将增长，尽管exps中的条目数为0或小于incs中的条目数，反之亦然。请参阅附件图像。这不是期望的结果。为什么会发生这种情况，以及如何使每个容器仅根据其对象的大小来增长？

Answer 1

您可以尝试处理exps为空的情况。将css设置为display：none等。没有css代码很难帮助。您还可以尝试将exps块包含在if编码中，以在长度为0时不显示exps。

Answer 2

使用flexbox时，这是预期的行为。

您可以在此处有2个选项。

1）使用flexbox -您需要添加条件，以便在incs / exps数组为空时，相应的div应该隐藏 （但当两个数组的长度不相等时，由于flexbox，它仍将显示相同的高度框）。

<div className={styles.container}>
  { props.balance.incs.length > 0 &&   //add condition
    <div className={styles.detailsItem}>
      <ul>
        {props.balance.incs.map(inc => (
          <DetailsItem item={inc} key={inc.id}/>
        ))}
      </ul>
    </div>
  }
  { props.balance.exps.length > 0 && //add condition
    <div className={styles.detailsItem}>
      <ul>
        {props.balance.exps.map(exp => (
          <DetailsItem item={exp} key={exp.id}/>
        ))}
      </ul>
    </div>
  }
</div>

Demo

2）没有Flexbox -您可以尝试float: left和float: right并完全删除Flexbox。这样您就可以实现您想要的。它将根据数组的大小显示框。

Demo

在React中两次使用相同组件时出现意外行为

2 个答案: