Блог

Главная - Вопросы по программированию - Создать компонент react dynamic children, зависящий от ширины дочерних элементов

Создать компонент react dynamic children, зависящий от ширины дочерних элементов

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Я хотел бы создать контейнер динамической ширины React, содержащий дочерние элементы динамической ширины.

Контейнер React динамической ширины — это контейнер с минимальной шириной 100 пикселей и максимальной шириной 300 пикселей. Он может содержать много дочерних элементов, в зависимости от ширины каждого дочернего элемента.

например. Если он содержит один дочерний компонент шириной 120 пикселей, ширина контейнера должна составлять 120 пикселей.

Если ширина первого дочернего элемента равна 300 пикселей, он может содержать только этот дочерний элемент.

Если ширина первого дочернего элемента равна 200px, а второго — 100px, он может содержать только первого и второго дочерних элементов.

Если ширина первого дочернего элемента равна 200px, а второго — 50px, может ли он содержать нового дочернего элемента? Это зависит от ширины третьего дочернего компонента. Если его ширина превышает 50 пикселей, он не может быть включен.

Для этого я использую функциональный компонент React. Ключевой момент заключается в том, как заранее измерить ширину дочерних компонентов.

<a rel="noreferrer noopener nofollow" href="https:///» rel=»nofollow noreferrer»>Смотрите мою работоспособную демонстрацию.

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

1. тогда почему вы не учитываете ширину полей в своем коде?

2. Я вижу, что вы импортировали useRef , useEffect и useState в свой Container.js , но они не используются. Вы могли бы задать для своих дочерних <span> тегов ссылку, а затем с помощью useEffect hook добавить ширину вашего текущего дочернего элемента в состояние childWidth (используя useState ). Чтобы измерить ширину вашего дочернего компонента, вы можете использовать <ref_name>.current.offsetWidth

3. @ShivaSai Конечно, следует учитывать разницу. Это не ключевой момент моей проблемы. Итак, я не прояснил это четко.

4. @Alfred Я раздвоил демо другого парня. Вы хотели бы завершить эту демонстрацию в соответствии с моим требованием, чтобы принять ваш ответ.

5. @Сделал ли я небольшой codepen codepen.io/ssarapu/pen/mdPmgQB?editors=1100 , можете ли вы посмотреть, это то, что вы хотели.. нет javascript. только css и html