From 4392455ff73202832c642321635ccde805ce58e5 Mon Sep 17 00:00:00 2001 From: Karthik Rao Date: Mon, 24 Jun 2019 19:15:42 +0530 Subject: [PATCH] feat: add article for react portals (#33715) --- guide/english/react/portals/index.md | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 guide/english/react/portals/index.md diff --git a/guide/english/react/portals/index.md b/guide/english/react/portals/index.md new file mode 100644 index 0000000000..929518ef53 --- /dev/null +++ b/guide/english/react/portals/index.md @@ -0,0 +1,17 @@ +--- +title: Portals +--- +## Portals + +Portals were introduced with React 16.0. Portal provides a mechanism for a component to render its children in a DOM node that is outside the DOM hierarchy of parent component. In other words, a component that returns a portal from its render method can cause its children to be rendered as children of a completely different DOM node in the DOM tree. As a result, the position of the portal will be different in DOM tree versus the React tree. + +A portal can be created like so +```javascript +ReactDOM.createPortal(child, container) +``` +Here `child` is a element, string, or fragment and `container` is a DOM element. + +A detailed explanation with example can be found in the official documentation. The difference in postion of the portal can be observed in the browser's dev tools by comparing the 'Elements' and 'React' tabs. + +#### More Information +[React Portals](https://reactjs.org/docs/portals.html)