Preview
Video Player
00:00
00:00
Render Children into Other Dom Nodes with Portals
6:35React 16 introduces a new way of rendering into the DOM. You can render children into a DOM element that exists outside of your App's main DOM tree, with a new feature called “portals.”
React16 introduces a new way
of rendering into the DOM.
0:00
You can render children into
a DOM element that exists
0:04
outside of your apps main DOM tree
with a new feature called Portals.
0:07
For example, in your index.html template,
you'll usually have a div with the id
0:11
root, which is where your entire app is
rendered into the DOM via ReactDOM.render.
0:17
Well, to create a portal, you add a second
element that's a sibling of your root div.
0:23
So I'll create a div
with the id my-portal.
0:29
Then you can render specific parts
of your component tree inside
0:37
the sibling div with the new
createPortal function.
0:41
Over in app.js inside the App div,
I'll create
0:45
a JavaScript expression with
a set of curly brackets.
0:50
Then call ReactDOM.createPortal.
0:55
Since I'm calling ReactDOM.createPortal,
1:04
I'll need to import ReactDOM from
ReactDOM at the top of app.js.
1:08
The create portal function accepts
two arguments, child and container.
1:19
The first argument child is
the content you want to render.
1:24
So I'll render an <h1> with the text
Hello from inside the portal!</h1>.
1:29
The second argument
container is the DOM element
1:40
where the content is going to render.
1:44
So to render the h1
inside the my-portal div,
1:47
I'll pass it document.getElementById and
1:52
specify the my-portal id.
1:58
So now we see the h1 content in the app
and when I inspect the page in Dev Tools,
2:04
notice how the h1 is being rendered
outside of the main app component.
2:12
The portal is rendering it
inside the my-portal div.
2:17
So, as you can see,
2:21
createPortal provides a hook into
HTML that's outside the root div.
2:22
As mentioned in the React docs,
2:31
portals are useful when a parent
component has an overflow hidden or
2:33
z-index style, but you need the child
to visually break out of its container.
2:37
So a handy use case for portals is when
creating modal windows or overlays.
2:42
In the project files,
I've setup a component named Modal.
2:47
So in the return statement,
2:52
I'll create a portal with
ReactDOM.createPortal.
2:55
I'll pass it this.props.children
as the child argument.
3:03
And once again,
3:11
document.getElementByID('my-portal') as
the container argument.
3:12
So I'll simply copy it from app.js.
3:17
Since this Modal component returns
a portal via createPortal,
3:22
you can place it anywhere in your app and
3:26
it will always render its children
inside the my-portal div.
3:28
For example, I'll import Modal in app.js,
with import Modal
3:32
from '.components/Modal'.
3:42
And the return statement I'll delete
the portal we created earlier,
3:48
then I'll render the Modal by
including the Modal component.
3:53
As the Modal content,
I'll add a div with the class modal.
4:01
And inside the div, the text,
This is the Modal Window.
4:12
I have already written the CSS for
the Modal class in the stylesheet, so
4:21
in the browser we see the the Modal Window
overlay the entire page.
4:26
Even though the Modal portal is defined
and created from within the app component,
4:31
it is rendered outside the component,
as you can see here in Dev Tools.
4:38
It's rendered inside the my-portal div.
4:42
What's interesting about portals is that
4:48
the components they render are recognized
as regular child components of the app.
4:51
In other words, even though portal
can be anywhere in the DOM tree,
4:56
it behaves like a normal React
child in every other way.
5:00
For instance, an event triggered from
inside a portal still propagates or
5:03
bubbles up to the parent component.
5:09
For example, I'll add a handleClick
method to the app component that logs,
5:11
I was clicked to the console.
5:16
Then I'll give apps main app div and
5:30
onClick event that calls
the handleClick method.
5:32
And inside the Modal component I'll
include the button with the text Close.
5:39
The button is being passed
through the portal, so
5:49
you'll see it rendered
inside the my-portal div.
5:53
We added the onClick to the parent
app div inside root, so
5:58
the elements are not
ancestors in the DOM tree.
6:03
But notice in React Dev Tools that
the content passed through the portal
6:06
still exists in the React tree, regardless
of its position in the DOM tree.
6:12
The Modal component is
still a child of app.
6:16
So clicking the button logs,
I was clicked to the console.
6:20
The click event bubbles up and is caught
by the parent app component's onClick.
6:26
It triggers the handleClick
method regardless of whether it's
6:30
inside a portal, neat.
6:33