Как сравнить width родительского элемента с дочерними?

Question

[nickname13384]

Нужно если width дочерних элементов больше чем у родителя менять состояние

нужно использовать ref( )? ( как это делать для двух дочерних элементов? )

import React from 'react';

const Component = () => {

    return (

        <div className="parent" style={{width: '200px'>

            <p className="child1">Text 1</p>

            <p className="child2">Text 2</p>
        </div>
        
    );
};

export default Component;

Answer 1

[hzzzzl]

TO DO: добавить листенер на ресайз окна

Comments

[nickname13384]

Решение практически такое же как и у меня,
я просто думал что можно использовать только один ref() для родителя а через него уже узнать width у дочерних элементов

[Петр Мухуров]

nickname13384, можно, ref на html-элементе возвращает HTMLElement, к которому применим querySelectorAll.

[nickname13384]

Петр Мухуров, каким образом можно их получить с помощью querySelectorAll?

[Петр Мухуров]

nickname13384, node.querySelectorAll("> *")

[nickname13384]

Петр Мухуров, так

<div className="parent" ref={elWidth}>
 elWidth.node.querySelectorAll('p')

[Петр Мухуров]

nickname13384, нет

[nickname13384]

Петр Мухуров, спасибо работает так как я и хотел, нашел решение