ReactJS Context, Ref & componentDidMount Cyclus - PullRequest
Новая
       90

ReactJS Context, Ref & componentDidMount Cyclus

0 голосов
/ 08 марта 2019

Итак, у меня есть React Context, называемый Root, и я хочу определить начальный ref для RootProvider, например 

<RootProvider initRef={() => this.refs.huh}>
    <div ref="huh">
       <Initialize />
    </div>
</RootProvider>

RootProvider имеет функцию getInitRef: 

getInitRef() {
   return this.props.initRef();
}

Инициализировать компонент: 

render() {
    return (
        <RootConsumer>
        {({context}) => {
            this.RootConsumer = context;
            return (<h1>hello</h1>);
        }}}
        </RootConsumer>
     );
}
componentDidMount() {
    console.log(this.rootConsumer.getInitRef());
}

Ожидается: возврат начального div. (ref = huh), поскольку компонент Initialize загружен в элемент div ref = "huh", поэтому ссылка должна быть инициализирована до монтирования компонента Initialize.

Однако, Результат: undefined

Значение console.log (this.rootConsumer.getInitRef ()); возвращает неопределенное значение.

Теперь я могу понять почему, просто потому, что в тот момент, когда RootConsumer установил ссылку, ссылка еще не инициализирована.

Решение, которое будет работать, меняется 

componentDidMount() {
    console.log(this.rootConsumer.getInitRef());
}

до 

componentDidMount() {
    window.setTimeout(() => {
        console.log(this.rootConsumer.getInitRef());
    },0);
}

Теперь мои вопросы:

  • Когда монтируется подкомпонент, не означает ли это, что родительский элемент еще полностью смонтирован? (Как это показывает)

  • При использовании setTimeout: будет ли он всегда безопасно работать только тогда, когда родительский элемент полностью инициализировал свои 'refs? Другими словами: действительно ли setTimeout является стабильным решением в этом случае?

...