You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: content/docs/portals.md
+38-40
Original file line number
Diff line number
Diff line change
@@ -4,21 +4,21 @@ title: Portals
4
4
permalink: docs/portals.html
5
5
---
6
6
7
-
Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
7
+
Portals चिल्ड्रन को एक ऐसे DOM नोड में रेंडर करने का तरीका प्रदान करते हैं जो पैरेंट कौम्पोनॅन्ट के DOM हायरार्की के बाहर मौजूद हो।
8
8
9
9
```js
10
10
ReactDOM.createPortal(child, container)
11
11
```
12
12
13
-
The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
13
+
सबसे पहला आर्गुमेंट (`child`) कोई भी [रेंडर होने में सक्षम React चाइल्ड](/docs/react-component.html#render) है, जैसे कोई एलिमेंट, स्ट्रिंग या फ्रेगमेंट। दूसरा आर्गुमेंट (`container`) एक DOM एलिमेंट है।
14
14
15
-
## Usage {#usage}
15
+
## उपयोग {#usage}
16
16
17
-
Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
17
+
आम तौर पर, जब आप किसी कौम्पोनॅन्ट के रेंडर मेथड से एक एलिमेंट return करते हैं, तो उसे नज़दीकी पैरेंट नोड के चाइल्ड के रूप में DOM में माउंट करा जाता है:
18
18
19
19
```js{4,6}
20
20
render() {
21
-
// React mounts a new div and renders the children into it
21
+
// React एक नया div माउंट करता है और इसमें चिल्ड्रन को रेंडर करता है
22
22
return (
23
23
<div>
24
24
{this.props.children}
@@ -27,34 +27,34 @@ render() {
27
27
}
28
28
```
29
29
30
-
However, sometimes it's useful to insert a child into a different location in the DOM:
30
+
हालांकि, कभी कभार DOM में किसी अलग स्थान पर एक चाइल्ड को डालने की उपयोगिता होती है:
31
31
32
32
```js{6}
33
33
render() {
34
-
// React does *not* create a new div. It renders the children into `domNode`.
35
-
// `domNode` is any valid DOM node, regardless of its location in the DOM.
34
+
// React एक नया div *नहीं* बनाता। वह चिल्ड्रन को `domNode` में रेंडर करता है।
35
+
// `domNode` कोई भी एक मान्य DOM नोड है, DOM में इसका स्थान मायने नहीं रखता।
36
36
return ReactDOM.createPortal(
37
37
this.props.children,
38
38
domNode
39
39
);
40
40
}
41
41
```
42
42
43
-
A typical use case for portals is when a parent component has an `overflow: hidden`or`z-index`style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
43
+
Portals के विशिष्ट उपयोग का उदाहरण है जब एक पैरेंट कौम्पोनॅन्ट में `overflow: hidden`या`z-index`स्टाइल हो, लेकिन नेत्रहीन आपको चाइल्ड को उसके कंटेनर से "बाहर" करने की आवश्यकता हो। जैसे की डॉयलोग्स, होवरकार्ड और टूलटिप्स।
44
44
45
-
> Note:
45
+
> टिप्पणी:
46
46
>
47
-
> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus)becomes very important.
47
+
> ध्यान रखें, Portals के साथ काम करते वक्त [कीबोर्ड फोकस को मैनेज करना](/docs/accessibility.html#programmatically-managing-focus)बहुत जरूरी हो जाता है।
48
48
>
49
-
> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
49
+
> मोडल डॉयलोग्स के लिए, ये सुनिश्चित करें कि हर कोई [WAI-ARIA मोडल संलेखन प्रथाएं](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) का पालन करते हुए उनके साथ इंटरैक्ट कर सके।
50
50
51
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
51
+
[**इसे CodePen पर आजमाएं**](https://codepen.io/gaearon/pen/yzMaBd)
52
52
53
-
## Event Bubbling Through Portals {#event-bubbling-through-portals}
53
+
## Portals के माध्यम से इवेंट बबलिंग {#event-bubbling-through-portals}
54
54
55
-
Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the*DOM tree*.
55
+
एक portal DOM ट्री में कहीं भी हो, यह हर नज़रिये से एक सामान्य React चाइल्ड की तरह व्यवहार करता है। Context जैसे फीचर्स बिल्कुल उसी तरह से काम करते हैं, भले ही चाइल्ड एक portal हो, क्योंकि portal अभी भी *React ट्री* के अंदर है, इसका स्थान*DOM ट्री* में बेशक कहीं भी हो।
56
56
57
-
This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing*React tree*, even if those elements are not ancestors in the*DOM tree*. Assuming the following HTML structure:
57
+
इसमें इवेंट बबलिंग भी शामिल है। एक portal के अंदर से चलाया गया इवेंट उस*React ट्री* के ऐन्सिस्टर्ज़ तक प्रचारित करेगा, भले ही वे एलिमेंट्स*DOM ट्री* में ऐन्सिस्टर्ज़ न हों। निम्न HTML ढांचे को मानते हुए:
58
58
59
59
```html
60
60
<html>
@@ -65,10 +65,11 @@ This includes event bubbling. An event fired from inside a portal will propagate
65
65
</html>
66
66
```
67
67
68
-
A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
68
+
`#app-root` में एक `पैरेंट` कौम्पोनॅन्ट अपने सिबलिंग नोड `#modal-root` से एक अज्ञात बबलिंग इवेंट को पकड़ने में सक्षम होगा।
@@ -79,14 +80,12 @@ class Modal extends React.Component {
79
80
}
80
81
81
82
componentDidMount() {
82
-
// The portal element is inserted in the DOM tree after
83
-
// the Modal's children are mounted, meaning that children
84
-
// will be mounted on a detached DOM node. If a child
85
-
// component requires to be attached to the DOM tree
86
-
// immediately when mounted, for example to measure a
87
-
// DOM node, or uses 'autoFocus' in a descendant, add
88
-
// state to Modal and only render the children when Modal
89
-
// is inserted in the DOM tree.
83
+
// Modal के चिल्ड्रन को माउंट किए जाने के बाद portal एलिमेंट को DOM ट्री
84
+
// में डाला जाता है, अर्थात चिल्ड्रन को एक अलग DOM नोड पर रखा जाएगा। यदि
85
+
// चाइल्ड कौम्पोनॅन्ट को माउंट होने पर तुरंत DOM ट्री से जोड़ने की आवश्यकता होती है,
86
+
// जैसे डोम नोड को मापने के लिए, या डिसेंडेंट में 'autoFocus' का उपयोग करना
87
+
// हो, Modal में state जोड़ने के लिए और चिल्ड्रन केवल तभी रेंडर करने हों जब
88
+
// DOM ट्री में Modal डाला जाये।
90
89
modalRoot.appendChild(this.el);
91
90
}
92
91
@@ -110,9 +109,9 @@ class Parent extends React.Component {
110
109
}
111
110
112
111
handleClick() {
113
-
// This will fire when the button in Child is clicked,
114
-
// updating Parent's state, even though button
115
-
// is not direct descendant in the DOM.
112
+
// चाइल्ड में बटन पर क्लिक करने पर यह शुरू हो जाएगा,
113
+
// पैरेंट की state को अपडेट करते हुए, भले ही DOM
114
+
// में बटन प्रत्यक्ष डिसेंडेंट नहीं है।
116
115
this.setState(state => ({
117
116
clicks: state.clicks + 1
118
117
}));
@@ -121,12 +120,11 @@ class Parent extends React.Component {
121
120
render() {
122
121
return (
123
122
<div onClick={this.handleClick}>
124
-
<p>Number of clicks: {this.state.clicks}</p>
123
+
<p>क्लिक की संख्या: {this.state.clicks}</p>
125
124
<p>
126
-
Open up the browser DevTools
127
-
to observe that the button
128
-
is not a child of the div
129
-
with the onClick handler.
125
+
ब्राउज़र DevTools खोलें और यह देखें
126
+
की बटन onClick हैंडलर वाले div का
127
+
चाइल्ड नहीं है।
130
128
</p>
131
129
<Modal>
132
130
<Child />
@@ -137,18 +135,18 @@ class Parent extends React.Component {
137
135
}
138
136
139
137
function Child() {
140
-
// The click event on this button will bubble up to parent,
141
-
// because there is no 'onClick' attribute defined
138
+
// इस बटन का क्लिक इवेंट पैरेंट तक पहुंच जाएगा,
139
+
// क्योंकि कोई 'onClick' एट्रिब्यूट परिभाषित नहीं है
142
140
return (
143
141
<div className="modal">
144
-
<button>Click</button>
142
+
<button>क्लिक</button>
145
143
</div>
146
144
);
147
145
}
148
146
149
147
ReactDOM.render(<Parent />, appRoot);
150
148
```
151
149
152
-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
150
+
[**इसे CodePen पर आजमाएं**](https://codepen.io/gaearon/pen/jGBWpE)
153
151
154
-
Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />`component, the parent can capture its events regardless of whether it's implemented using portals.
152
+
किसी portal की इवेंट बबलिंग को उसके पैरेंट कौम्पोनॅन्ट में पकड़ने से अधिक लचीले सार का विकास होता है जो स्वाभाविक रूप से portals पर निर्भर नहीं होते हैं। उदाहरण के लिए, यदि आप एक `<Modal />`कौम्पोनॅन्ट रेंडर करते हैं तो पैरेंट इसके इवेंट्स को पकड़ सकते हैं भले ही यह portals का उपयोग करके लागू किया गया हो।
0 commit comments