Блог

Главная - Вопросы по программированию - Как динамически изменять размер отдельных столбцов строк в React, чтобы они были одинаковыми

Как динамически изменять размер отдельных столбцов строк в React, чтобы они были одинаковыми

#javascript #html #css #reactjs

Вопрос:

У меня есть структура таблицы, состоящая из отдельных блоков, которые не могут быть объединены в один и тот же блок, такой как этот, только намного больше.

Структура этого в идеале должна оставаться прежней.

 <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/

Комментарии:

1. Почему ты не пользуешься столом?

2. Это гораздо более сложное дерево компонентов в реальной жизни, в котором происходит гораздо больше, построенное из различных частей и т. Д. Это был просто очень упрощенный пример.

3. Хорошо, но если это должно выглядеть как таблица, возможно, используйте эту опцию. Плюс: «но не знал, насколько хорошо это будет работать с действительно большой таблицей» , указывает на то, что вы еще не исследовали этот маршрут.

4. Вы можете легко достичь желаемого с помощью нескольких строк Flexbox. Я отредактировал твою скрипку: jsfiddle.net/rf41yebk/8 , но я согласен с @Andy. Если это таблица, то семантически было бы лучше на самом деле использовать теги таблиц HTML.

5. React значительно упрощает написание HTML, поэтому не беспокойтесь о повторяющемся характере тегов таблиц. Реагируйте, чтобы это выглядело хорошо.

Метки: ,