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

Мой код:


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 внутри моего дочернего компонента для самого первоначального рендеринга?


reactjs react-hooks react-ref react-forwardref use-ref
person Sravan Reddy    schedule 14.04.2020    source источник
comment
Отвечает ли это на ваш вопрос? React Hooks: почему .current имеет значение null для useRef Hook?   -  person segFault    schedule 14.04.2020
comment
Нет, это не так. вопрос, который они упомянули, совершенно другой, поскольку в My ref прикреплен и инициализирован родительский компонент, прежде чем он будет передан дочернему компоненту, поэтому я ожидаю, что он будет иметь значение. Я могу использовать хук useEffect и запускать повторный рендеринг при изменении значения ref, который снова будет повторно рендерить компонент. Но я хочу сделать первый рендер.   -  person Sravan Reddy    schedule 14.04.2020

Ответы (1)


arrow_upward
2
arrow_downward

Ссылка 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>
)};
person Seth Lutske    schedule 14.04.2020
comment
да, вы правы \ n `` `const [, reRender] = useState (); useEffect (() = ›{reRender ({});}, [ParentReference]); `` Я делал это, но ожидаю, сможем ли мы что-нибудь сделать при первом рендере? - person Sravan Reddy; 14.04.2020
comment
Не то, чтобы я знаю. Ссылки - это что-то вроде анти-шаблона при работе с React, поэтому вы должны убедиться, что вам действительно нужно использовать ссылку, а не передавать опору или управлять состоянием от бабушки и дедушки. Чего вы пытаетесь достичь, передавая сюда ссылку? Также, если этот ответ помог вам, принято отмечать его как ответ и / или голосовать за него. Все любят бессмысленные интернет-точки. - person Seth Lutske; 14.04.2020
comment
У меня есть оверлей внутри моего дочернего компонента, который я хочу разместить со ссылкой на мой родительский компонент. - person Sravan Reddy; 15.04.2020
comment
это похоже на то, что можно сделать с помощью css. если вы разместите больше кода и / или создадите рабочий пример (codeandbox или что-то подобное) и дадите немного больше подробностей о том, чего именно вы хотите достичь с точки зрения позиционирования, возможно, мы могли бы помочь вам понять это немного лучше. - person Seth Lutske; 15.04.2020