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

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 с помощью целевой опоры и использую ее для некоторых манипуляций с dom внутри дочернего элемента.

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

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

Answer 1

Ссылка segFault на этот ответ верна. Ваш исх он не инициализирован, пока после того, как ваша компонента первой визуализации. Итак, когда вы визуализируете свой<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>
)};