Harry Potter and the unstable_renderSubtreeIntoContainer

AlfaLab

Harry Potter
and the
renderSubtreeIntoContainer

Библиотеки компонентов

Material-UI

				<SelectField>
					<TextField>
					<DropDownMenu>
						<Popover>
							<Menu>
								<List>
									<MenuItem>
										<...>
			

bem-components

				select
					button
					popup
						menu
							menu__item
								...
			

F I Ж Е R

Fiжer

				<Select>
					<Button>
					<Popup>
						<Menu>
							<MenuItem>
								<...>
			

<Popup />

<Popup />

Идеи?

Идеи?

  1. Скрывать попапы на scroll

Идеи?

  1. Скрывать попапы на scroll
  2. Рендерить в body, и перерисовывать на scroll

Идеи?

  1. Скрывать попапы на scroll
  2. Рендерить в body, и перерисовывать на scroll

Идеи?

  1. Скрывать попапы на scroll
  2. Рендерить в body, и перерисовывать на scroll
  3. Рендерить там же, где вызывается <Popup />

Делать так

			<Popup> ⇝ body
			<Popup> ⇝ body
				<ContainerProvider>
					<Popup> ⇝ container
					<Popup> ⇝ container
					<Popup> ⇝ container
		

Откуда взять контейнер?

<PopupContainerProvider />

Как отрендерить попап?

<RenderInContainer />

А что с публичными методами?

  • Popup.setTarget()
  • Popup.setPosition()
  • А как они работают?

    // Где-то наверху
    this.refs.popup.setPosition()
    
    		
    // А что в ref?
    render() {
    	return <Popup ref='popup' />
    }
    
    		

    Не прерывать рендер детей!

    <Popup />

    <IsolatedContainer />

    shouldComponentUpdate() {
    	    return false;
    }
    	

    Cхема

    <PopupContainerProvider /> ⇢ render ⇢
    <IsolatedContainer /> ⇝ context ⇝
    <Popup /> props ⤵
    <RenderInContainer /> render ⤴

    fin