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/fragments.md
+18-18Lines changed: 18 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -1,9 +1,9 @@
1
1
---
2
2
id: fragments
3
-
title: Fragments
3
+
title: Fragmentos
4
4
permalink: docs/fragments.html
5
5
---
6
-
Un patrón común en React es que un componente devuelva multiples elementos. Los Fragments te permiten agrupar una lista de hijos sin agregar nodos extra al DOM.
6
+
Un patrón común en React es que un componente devuelva multiples elementos. Los Fragmentos te permiten agrupar una lista de hijos sin agregar nodos extra al DOM.
7
7
8
8
```js
9
9
render() {
@@ -44,8 +44,8 @@ class Columns extends React.Component {
44
44
render() {
45
45
return (
46
46
<div>
47
-
<td>Hola</td>
48
-
<td>Mundo</td>
47
+
<td>Hello</td>
48
+
<td>World</td>
49
49
</div>
50
50
);
51
51
}
@@ -58,14 +58,14 @@ resulta en una salida de `<Table />` de:
58
58
<table>
59
59
<tr>
60
60
<div>
61
-
<td>Hola</td>
62
-
<td>Mundo</td>
61
+
<td>Hello</td>
62
+
<td>World</td>
63
63
</div>
64
64
</tr>
65
65
</table>
66
66
```
67
67
68
-
Los Fragments solucionan este problema.
68
+
Los Fragmentos solucionan este problema.
69
69
70
70
## Uso
71
71
@@ -74,36 +74,36 @@ class Columns extends React.Component {
74
74
render() {
75
75
return (
76
76
<React.Fragment>
77
-
<td>Hola</td>
78
-
<td>Mundo</td>
77
+
<td>Hello</td>
78
+
<td>World</td>
79
79
</React.Fragment>
80
80
);
81
81
}
82
82
}
83
83
```
84
84
85
-
que resulta en una correcta salida de `<Table />` de:
85
+
que resulta en una salida correcta de `<Table />` de:
86
86
87
87
```jsx
88
88
<table>
89
89
<tr>
90
-
<td>Hola</td>
91
-
<td>Mundo</td>
90
+
<td>Hello</td>
91
+
<td>World</td>
92
92
</tr>
93
93
</table>
94
94
```
95
95
96
96
### Sintaxis corta
97
97
98
-
Hay una sintaxis nueva, más corta que puede usar para declarar fragments. Parecen etiquetas vacías:
98
+
Hay una sintaxis nueva, más corta que puedes usar para declarar fragmentos. Parecen etiquetas vacías:
99
99
100
100
```jsx{4,7}
101
101
class Columns extends React.Component {
102
102
render() {
103
103
return (
104
104
<>
105
-
<td>Hola</td>
106
-
<td>Mundo</td>
105
+
<td>Hello</td>
106
+
<td>World</td>
107
107
</>
108
108
);
109
109
}
@@ -114,16 +114,16 @@ Puedes utilizar `<></>` de la misma manera que usarías cualquier otro elemento,
114
114
115
115
Considera que: **[muchas herramientas no lo soportan aún](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, por lo que podrías escribir explícitamente `<React.Fragment>` hasta que las herramientas se pongan al día.
116
116
117
-
### Fragments incrustados
117
+
### Fragmentos incrustados
118
118
119
-
Fragments declarados con la sintaxis explícita `<React.Fragment>` pueden tener llaves. Un caso de uso para esto es el mapeo de una colección a un arreglo de fragment -- por ejemplo, para crear una lista de descripción:
119
+
Fragmentos declarados con la sintaxis explícita `<React.Fragment>` pueden tener llaves. Un caso de uso para esto es el mapeo de una colección a un arreglo de fragmentos -- por ejemplo, para crear una lista de descripción:
120
120
121
121
```jsx
122
122
functionGlossary(props) {
123
123
return (
124
124
<dl>
125
125
{props.items.map(item=> (
126
-
// Sin la 'key', React disparará una advertencia de key
126
+
// Sin la prop 'key', React disparará una advertencia de key
0 commit comments