在 React 中兩次使用相同組件時的意外行為

Question

我有兩個對象incs和exps每個都有屬性： desc ， amount和id 。 我想將一個容器中每個 object 的詳細信息顯示為一個列表，兩個容器並排顯示。 我是這樣做的

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 incs的條目數，反之亦然。 見附圖。 這不是期望的結果。 為什么會發生這種情況，以及如何使每個容器僅根據其 object 的大小增長？

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>

演示

---

2)沒有 flexbox - 您可以嘗試float: left & float: right並完全刪除 flexbox。 通過這種方式，您可以實現您想要的。 它將根據數組的大小顯示框。

演示