ReactJS: как я могу получить доступ к ширине родительского элемента из дочернего компонента?

Question

ИСПРАВЛЕНО: я пропустил добавление .current к моей ссылке ...

Мне нужно знать ширину элемента, который будет содержать мой компонент: глядя на SO, я нашел решение, но не смогработа для меня (возвращает неопределенное значение):

import React from 'react';

import './Badger.css';

export default function Badger(props) {

  const refContainer = React.useRef(null);

  React.useLayoutEffect(()=>{
    // console.log(refContainer); I missed .current, now it works
    console.log(refContainer.current); // Change the line to this
  });

  const items = props.items ? props.items : [];

  return <div ref={refContainer}>{ items.join(", ") }</div>

}

Родительским элементом в этом случае является td:

<td>
  <Badger
    items={r.to}
    listContainerWidth={recipientsWidth}
  />
</td>

Но это console.log возвращает "неопределенное". Как я могу получить родительский элемент?

Answer 1

Я пропустил .current в моей ссылке. Если вы отредактируете код следующим образом, это решит проблему!

React.useLayoutEffect(()=>{
  // console.log(refContainer); I missed .current, now it works
  console.log(refContainer.current); // Change the line to this
});