React: знать размер элемента до его получения.

Предположим, что компонент должен знать свой размер до его рендеринга. Насколько мне известно, я могу это сделать: визуализировать компонент, в компонентеDidMount получить DOM node и извлечь из него размер, обновить состояние с этим размером, а затем снова выполнить рендеринг (позволяет не усложнять работу с прослушивателями событий, которые я бы привязал к событию изменения размера окна, позволяет предположить, что окно не изменяет размер) Он работает, но кажется грязным, первый рендер - это просто трата ресурсов, я хочу знать размер элемента (или его контейнера) до его отображения, я знаю, что большую часть времени сам элемент объявляет размер, но есть некоторые ситуации когда родительский элемент объявляет размер, и мой случай является одной из этих ситуаций. Итак, чтобы подвести итог, есть ли какой-либо способ доступа к родительскому элементу реагирующего компонента до его рендеринга (в компонентеWillMount)?

P.S. Я знаю, как реагировать на изменения, но мне нужно более простое решение, для которого не нужны внешние плагины. Я просто хочу знать, возможно ли получить доступ к родительскому node в компонентеWillMount в ответ или нет.

Ответы

Ответ 1

Ответ - нет, но, пожалуйста, прочитайте идеи о том, как справиться.

Если элемент DOM не существует, вы не можете найти его размеры. Элемент DOM не существует до тех пор, пока не будет выполнен первый рендер для каждого компонента. Вы не можете ничего знать об этом элементе DOM или его родительском элементе, пока не будет вызван компонент componentDidMount().

Обратите внимание также на порядок отображения компонентов. При первоначальном рендеринге дерева/цепочки компонентов дочерний элемент componentDidMount() будет вызываться перед родительским componentDidMount()! Здесь снимок журналов из вложенного дерева меню:

(MenuItemSubmenu:handleRefSet)          appMenu:2.2.5.4   handleRefSet()
(MenuItemSubmenu:componentDidMount)     appMenu:2.2.5.4   componentDidMount()
(MenuPane:handleRefSet)                 appMenu:2.2.5   handleRefSet()
(MenuPane:componentDidMount)            appMenu:2.2.5   componentDidMount()
(MenuItemSubmenu:handleRefSet)          appMenu:2.2.5   handleRefSet()
(MenuItemSubmenu:componentDidMount)     appMenu:2.2.5   componentDidMount()
(MenuPane:handleRefSet)                 appMenu:2.2   handleRefSet()
(MenuPane:componentDidMount)            appMenu:2.2   componentDidMount()
(MenuItemSubmenu:handleRefSet)          appMenu:2.2   handleRefSet()
(MenuItemSubmenu:componentDidMount)     appMenu:2.2   componentDidMount()

componentDidMount() для дочернего элемента 2.2.5.4 вызывается перед этим для его родительского элемента 2.2.5. Из этого можно видеть, что родительский компонент не может знать свой собственный элемент DOM до тех пор, пока вся обработка для ребенка не будет завершена. Ум, ничего себе!

Однако, выполняя свой вопрос, я добавил несколько протоколов к компоненту componentDidMount(). Я зарегистрировал this.refToOurDom.parentElement и обнаружил, что он определен и выглядит хорошо!

(MenuItemSubmenu:handleRefSet)  appMenu:2.2.5.4   parent dims:  height 76   width 127

Итак, ответ на ваш вопрос: нет, ваш элемент DOM еще не существует в componentWillMount(), и родительский элемент не существует ни при первоначальном рендеринге. Вы должны подождать, пока не будет вызван componentDidMount(), прежде чем обнаруживать какие-либо размеры компонента.

Но обратите внимание на трюк, который используется react-dimensions. Возможно, это даст вам идеи структурирования вашего кода.

В своем методе render() react-dimensions не может отображать прилагаемый компонент! При первоначальном рендеринге он отображает только содержащее <div> . Только после вызова componentDidMount() и выяснения родительских измерений только тогда будет отображаться вложенный компонент и теперь, поставляя родительские размеры.

Таким образом, другой ответ просто не отображает содержимое вашего компонента, пока вы не узнаете размеры родителя. Использование react-dimensions делает это легко, потому что вы даже не отображаются до тех пор, пока размеры не будут известны. Но вы также можете сделать то же самое, получить ссылку в своих componentDidMount() и захватывающих измерениях и просто разместить if(){} вокруг рендеринга реального содержимого вашего компонента, пока не узнаете размеры. (Вам понадобится хотя бы внешний <div> , чтобы получить свой собственный ref)