Skip to content

Commit 6aae81b

Browse files
authored
Merge pull request #78 from ricardoerl/translate/context
Translate Context
2 parents fcc9e73 + a93f0ab commit 6aae81b

File tree

6 files changed

+90
-89
lines changed

6 files changed

+90
-89
lines changed

content/docs/context.md

Lines changed: 67 additions & 66 deletions
Large diffs are not rendered by default.

examples/context/motivation-problem.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ class App extends React.Component {
66

77
function Toolbar(props) {
88
// highlight-range{1-4,7}
9-
// The Toolbar component must take an extra "theme" prop
10-
// and pass it to the ThemedButton. This can become painful
11-
// if every single button in the app needs to know the theme
12-
// because it would have to be passed through all components.
9+
// El componente Toolbar debe tener un prop adicional "theme"
10+
// y pasarlo a ThemedButton. Esto puede llegar a ser trabajoso
11+
// si cada botón en la aplicación necesita saber el tema,
12+
// porque tendría que pasar a través de todos los componentes.
1313
return (
1414
<div>
1515
<ThemedButton theme={props.theme} />

examples/context/motivation-solution.js

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// highlight-range{1-4}
2-
// Context lets us pass a value deep into the component tree
3-
// without explicitly threading it through every component.
4-
// Create a context for the current theme (with "light" as the default).
2+
// Context nos permite pasar un valor a lo profundo del árbol de componentes
3+
// sin pasarlo explícitamente a través de cada componente.
4+
// Crear un Context para el tema actual (con "light" como valor predeterminado).
55
const ThemeContext = React.createContext('light');
66

77
class App extends React.Component {
88
render() {
99
// highlight-range{1-3,5}
10-
// Use a Provider to pass the current theme to the tree below.
11-
// Any component can read it, no matter how deep it is.
12-
// In this example, we're passing "dark" as the current value.
10+
// Usa un Provider para pasar el tema actual al árbol de abajo.
11+
// Cualquier componente puede leerlo, sin importar qué tan profundo se encuentre.
12+
// En este ejemplo, estamos pasando "dark" como valor actual.
1313
return (
1414
<ThemeContext.Provider value="dark">
1515
<Toolbar />
@@ -19,8 +19,8 @@ class App extends React.Component {
1919
}
2020

2121
// highlight-range{1,2}
22-
// A component in the middle doesn't have to
23-
// pass the theme down explicitly anymore.
22+
// Un componente en el medio no tiene que
23+
// pasar el tema hacia abajo explícitamente.
2424
function Toolbar(props) {
2525
return (
2626
<div>
@@ -31,9 +31,9 @@ function Toolbar(props) {
3131

3232
class ThemedButton extends React.Component {
3333
// highlight-range{1-3,6}
34-
// Assign a contextType to read the current theme context.
35-
// React will find the closest theme Provider above and use its value.
36-
// In this example, the current theme is "dark".
34+
// Asigna un contextType para leer el contexto del tema actual.
35+
// React encontrará el Provider superior más cercano y usará su valor.
36+
// En este ejemplo, el tema actual es "dark".
3737
static contextType = ThemeContext;
3838
render() {
3939
return <Button theme={this.context} />;

examples/context/multiple-contexts.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// Theme context, default to light theme
22
const ThemeContext = React.createContext('light');
33

4-
// Signed-in user context
4+
// Contexto de usuario registrado
55
const UserContext = React.createContext({
66
name: 'Guest',
77
});
@@ -10,7 +10,7 @@ class App extends React.Component {
1010
render() {
1111
const {signedInUser, theme} = this.props;
1212

13-
// App component that provides initial context values
13+
// Componente App que proporciona valores de contexto iniciales
1414
// highlight-range{2-3,5-6}
1515
return (
1616
<ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
3131
);
3232
}
3333

34-
// A component may consume multiple contexts
34+
// Un componente puede consumir múltiples contextos.
3535
function Content() {
3636
// highlight-range{2-10}
3737
return (

examples/context/theme-detailed-app.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import {ThemeContext, themes} from './theme-context';
22
import ThemedButton from './themed-button';
33

4-
// An intermediate component that uses the ThemedButton
4+
// Un componente intermedio que utiliza ThemedButton.
55
function Toolbar(props) {
66
return (
77
<ThemedButton onClick={props.changeTheme}>
@@ -29,9 +29,9 @@ class App extends React.Component {
2929

3030
render() {
3131
//highlight-range{1-3}
32-
// The ThemedButton button inside the ThemeProvider
33-
// uses the theme from state while the one outside uses
34-
// the default dark theme
32+
// El botón ThemedButton dentro de ThemeProvider
33+
// usa el tema del estado mientras que el exterior usa
34+
// el tema oscuro predeterminado
3535
//highlight-range{3-5,7}
3636
return (
3737
<Page>

examples/context/theme-detailed-theme-context.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export const themes = {
1111

1212
// highlight-range{1-3}
1313
export const ThemeContext = React.createContext(
14-
themes.dark // default value
14+
themes.dark // valor por defecto
1515
);

0 commit comments

Comments
 (0)