javascript - 如何在 React 中动态调整不同行列的大小以使其相同

Question

我有一个表结构，它由不同的块组成，这些块不能被放入同一个块中，比如这个 - 只有更大。

理想情况下，这种结构需要保持不变。

<div class="dynamicList">
   <div class="header">
      <div class="item">col1</div>
      <div class="item">col2</div>
   </div>
   <div class="row">
      <div class="item">Learn JavaScript</div>
      <div class="item">test message</div>
   </div>
   <div class="row">
      <div class="item">Build something awesome</div>
      <div class="item">medium message</div>
   </div>
</div>

我想要一种能够动态调整行中列的大小以自动适应文本的方法，以便将最大的文本列宽度用于同一列的所有其他列。顶部是它的外观，底部是我希望它的外观。

我希望我可以只使用 CSS 来解决这个问题，但是我觉得我可能也需要一些 JavaScript。我正在使用 React，所以考虑使用 useRef 钩子，但不知道这对一个非常大的表执行得有多好。

计算此宽度然后在同一索引的所有列中使用它的最佳方法是什么？

这是一个显示问题的JS小提琴。

https://jsfiddle.net/og8kz3hp/65/

标签： javascripthtmlcssreactjs