React props.children width

Question

Есть ли способ получить ширину детей с компонентами React. У меня есть компонент оболочки, называемый отсутствием имени Container, и я добавляю к нему дочерние элементы div типа из Component1. Пример ниже. Мне интересно, есть ли способ получить ширину каждого дочернего элемента div в контейнере, когда он монтируется.

ОБНОВЛЕНО Примечание: Причина Я пытаюсь получить контейнеры детей ширины так, я могу установить динамические контейнеры ширины на основе общего количества детей. Установив ширину контейнеров на количество детской ширины, я могу разрешить некоторые эффекты горизонтальной прокрутки, которые я хочу сделать.

Компонент 1

export default class Component1 extends Component{ 
render(){ 
    return(
    <Container> 
     <div className="large-box"/> 
     <div className="large-box-dark"/> 
    </Container> 
) 
} 
} 

Теперь мой Container компонент.

export default class Container extends Component{ 
     componentDidMount(){ 
     this.props.children.forEach((el) => { 
     // get each child's width 
     console.log("el =", el); 
     }); 
     } 


    render() { 
    return (
     <div className="scroller" ref={(scroller) => { this.scroller = scroller }}> 
     {this.props.children} 
     </div> 
    ) 
    } 
} 

Answer 1

Я бы сказал, что технически это не представляется возможным. JSX

<div className="large-box"/> 

не относится к DOM элементу, (который имеет ширину, как только это было вынесено), но к React элемента, который является объектом в памяти, описывающая, как сделать DOM-элемент. Поскольку элемент React не отображается или даже связан с фактическим DOM в браузере, он не может знать ширину.

Помните, что React может отображаться на сервере - сервер не может знать, что браузер на другом компьютере будет отображаться.

Я бы также повторил то, что отметил Педро Насименто - это решение, вероятно, лучше всего решается каким-то другим способом, но без контекста его трудно помочь.

Answer 2

Вы можете использовать refs. Хотя вам следует избегать касания DOM до тех пор, пока не будет другого пути. Но здесь мы идем.

Дайте вашим дочерним компонентам ref, который является выходным люком, предоставленным React для доступа к DOM (с предупреждением использовать другие методы, прежде чем приступать к этому).

Детского компонент

class ChildComp extends Component { 
    getWidth =() => { 
    //Access the node here and get the width 
    return this.childNode.offsetWidth(); //or clientWidth(); 
    } 
    render() { 
    return (
     <div ref={(r) => {this.childNode = r}}> 
     </div> 
    ); 
    } 
} 

Родитель Компонент:

class ParentComp extends Component { 
    componentDidMount() { 
    //Access the child component function from here 
    this.childComponent.getWidth(); 
    } 
    render() { 
    return (
     <ChildComp 
      ref={(r) => {this.childComponent = r}} /> 
    ); 
    } 
} 

Но помните использовать вышеупомянутый метод, когда нет никакого способа получения вещи сделать декларативно.