Как передать ссылку, созданную обработчиком реакции родительского компонента, на дочерние компоненты?

Question

Мой код:

const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />
          <AnotherChild className="mr-3" />
        </Nav>
)};

Как видно из кода выше, я создал ссылку, используя ловушку useRef, и прикрепил ее к моему ParentComponent. Теперь я перехожу к ChildComponent с помощью целевой опоры и использую ее для выполнения некоторых манипуляций с домом внутри ребенка.

Проблема: Я получаю ParentReference как null для первого рендера компонента. (Если я заставлю повторный рендеринг при изменении ParentReference, он обновит и повторно отобразит весь компонент, тогда он будет иметь значение.)

Как получить ParentReference внутри моего дочернего компонента для самого начального рендеринга?

Answer 1

ссылка segFault на этот ответ правильный. Ваш ref не инициализируется до после первого рендеринга вашего компонента. Поэтому, когда вы отрисовываете <ChildComponent target={ParentReference.current} />, ссылка еще не определена.

В этом сценарии вы можете рассмотреть возможность использования useEffect для установки переменной состояния при первом рендеринге и условного рендеринга <ChildComponent /> один раз. эта переменная состояния установлена.

const MyComponent: React.FC = () => {

const ParentReference = useRef(null);

// define state variable defining the ref as not yet ready
const [refReady, setRefReady] = useState(false)
// On first mount, set the variable to true, as the ref is now available
useEffect( () => {
  setRefReady(true)
}, [])

return(
<Parent className="d-flex flex-row" ref={ParentReference}>
          {refReady && <ChildComponent
            className="mr-3"
            target={ParentReference.current}
          />}
          <AnotherChild className="mr-3" />
        </Nav>
)};