Skip to content

Commit ec05059

Browse files
Merge branch 'master' into translation-SyntheticEvent-hi
2 parents 86f3bb6 + 94da984 commit ec05059

File tree

2 files changed

+40
-42
lines changed

2 files changed

+40
-42
lines changed

content/docs/portals.md

+38-40
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@ title: Portals
44
permalink: docs/portals.html
55
---
66

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 हायरार्की के बाहर मौजूद हो।
88

99
```js
1010
ReactDOM.createPortal(child, container)
1111
```
1212

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 एलिमेंट है।
1414

15-
## Usage {#usage}
15+
## उपयोग {#usage}
1616

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 में माउंट करा जाता है:
1818

1919
```js{4,6}
2020
render() {
21-
// React mounts a new div and renders the children into it
21+
// React एक नया div माउंट करता है और इसमें चिल्ड्रन को रेंडर करता है
2222
return (
2323
<div>
2424
{this.props.children}
@@ -27,34 +27,34 @@ render() {
2727
}
2828
```
2929

30-
However, sometimes it's useful to insert a child into a different location in the DOM:
30+
हालांकि, कभी कभार DOM में किसी अलग स्थान पर एक चाइल्ड को डालने की उपयोगिता होती है:
3131

3232
```js{6}
3333
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 में इसका स्थान मायने नहीं रखता।
3636
return ReactDOM.createPortal(
3737
this.props.children,
3838
domNode
3939
);
4040
}
4141
```
4242

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` स्टाइल हो, लेकिन नेत्रहीन आपको चाइल्ड को उसके कंटेनर से "बाहर" करने की आवश्यकता हो। जैसे की डॉयलोग्स, होवरकार्ड और टूलटिप्स।
4444

45-
> Note:
45+
> टिप्पणी:
4646
>
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) बहुत जरूरी हो जाता है।
4848
>
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) का पालन करते हुए उनके साथ इंटरैक्ट कर सके।
5050
51-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
51+
[**इसे CodePen पर आजमाएं**](https://codepen.io/gaearon/pen/yzMaBd)
5252

53-
## Event Bubbling Through Portals {#event-bubbling-through-portals}
53+
## Portals के माध्यम से इवेंट बबलिंग {#event-bubbling-through-portals}
5454

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 ट्री* में बेशक कहीं भी हो।
5656

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 ढांचे को मानते हुए:
5858

5959
```html
6060
<html>
@@ -65,10 +65,11 @@ This includes event bubbling. An event fired from inside a portal will propagate
6565
</html>
6666
```
6767

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` से एक अज्ञात बबलिंग इवेंट को पकड़ने में सक्षम होगा।
6969

70-
```js{28-31,42-49,53,61-63,70-71,74}
71-
// These two containers are siblings in the DOM
70+
71+
```js{26-29,40-47,51,58-60,67-68,71}
72+
// ये दो कंटेनर DOM में सिबलिंग हैं
7273
const appRoot = document.getElementById('app-root');
7374
const modalRoot = document.getElementById('modal-root');
7475
@@ -79,14 +80,12 @@ class Modal extends React.Component {
7980
}
8081
8182
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 डाला जाये।
9089
modalRoot.appendChild(this.el);
9190
}
9291
@@ -110,9 +109,9 @@ class Parent extends React.Component {
110109
}
111110
112111
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+
// में बटन प्रत्यक्ष डिसेंडेंट नहीं है।
116115
this.setState(state => ({
117116
clicks: state.clicks + 1
118117
}));
@@ -121,12 +120,11 @@ class Parent extends React.Component {
121120
render() {
122121
return (
123122
<div onClick={this.handleClick}>
124-
<p>Number of clicks: {this.state.clicks}</p>
123+
<p>क्लिक की संख्या: {this.state.clicks}</p>
125124
<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+
चाइल्ड नहीं है।
130128
</p>
131129
<Modal>
132130
<Child />
@@ -137,18 +135,18 @@ class Parent extends React.Component {
137135
}
138136
139137
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' एट्रिब्यूट परिभाषित नहीं है
142140
return (
143141
<div className="modal">
144-
<button>Click</button>
142+
<button>क्लिक</button>
145143
</div>
146144
);
147145
}
148146
149147
ReactDOM.render(<Parent />, appRoot);
150148
```
151149

152-
[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
150+
[**इसे CodePen पर आजमाएं**](https://codepen.io/gaearon/pen/jGBWpE)
153151

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 का उपयोग करके लागू किया गया हो।

content/languages.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
- name: Persian
4343
translated_name: فارسی
4444
code: fa
45-
status: 0
45+
status: 1
4646
- name: French
4747
translated_name: Français
4848
code: fr
@@ -66,7 +66,7 @@
6666
- name: Hungarian
6767
translated_name: magyar
6868
code: hu
69-
status: 1
69+
status: 2
7070
- name: Armenian
7171
translated_name: Հայերեն
7272
code: hy

0 commit comments

Comments
 (0)