Skip to content

Commit 4e0dbb2

Browse files
dragomanodragomano
authored
docs: Update Russian translation (#1296)
* Update ru/guide/v10/context.md * Update ru/guide/v10/server-side-rendering.md * Update ru/guide/v10/signals.md
1 parent 991bd7f commit 4e0dbb2

3 files changed

Lines changed: 482 additions & 234 deletions

File tree

‎content/ru/guide/v10/context.md‎

Lines changed: 108 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -38,81 +38,111 @@ export const Locale = createContext(null);
3838
> Начальное значение, установленное с помощью `createContext`, используется только в отсутствие `Provider` выше потребителя в дереве. Это может быть полезно для тестирования компонентов в изоляции, так как позволяет избежать необходимости создания обёртки `Provider` вокруг вашего компонента.
3939
4040
```jsx
41-
import { createContext } from "preact";
41+
import { createContext } from 'preact';
4242

43-
export const Theme = createContext("light");
43+
export const Theme = createContext('light');
4444

4545
function App() {
46-
return (
47-
<Theme.Provider value="dark">
48-
<SomeComponent />
49-
</Theme.Provider>
50-
);
46+
return (
47+
<Theme.Provider value="dark">
48+
<SomeComponent />
49+
</Theme.Provider>
50+
);
5151
}
5252
```
5353

5454
> **Совет:** Вы можете иметь несколько провайдеров одного и того же контекста в вашем приложении, но будет использоваться только ближайший к потребителю.
5555
5656
### Использование контекста
5757

58-
Существует два способа потребления контекста, в значительной степени в зависимости от предпочитаемого вами стиля компонентов: `Consumer` (классовые компоненты) и хук `useContext` (функциональные компоненты/хуки).
58+
Существуют три способа использования контекста, в значительной степени в зависимости от предпочитаемого вами стиля компонентов: `static contextType` (классовые компоненты), хук `useContext` (функциональные компоненты/хуки), и `Context.Consumer` (все компоненты).
59+
60+
<tab-group tabstring="contextType, useContext, Context.Consumer">
61+
62+
```jsx
63+
// --repl
64+
import { render, createContext, Component } from 'preact';
65+
66+
const SomeComponent = props => props.children;
67+
// --repl-before
68+
const ThemePrimary = createContext('#673ab8');
69+
70+
class ThemedButton extends Component {
71+
static contextType = ThemePrimary;
72+
73+
render() {
74+
const theme = this.context;
75+
return <button style={{ background: theme }}>Стилизованная кнопка</button>;
76+
}
77+
}
5978

60-
<tab-group tabstring="Consumer, useContext">
79+
function App() {
80+
return (
81+
<ThemePrimary.Provider value="#8f61e1">
82+
<SomeComponent>
83+
<ThemedButton />
84+
</SomeComponent>
85+
</ThemePrimary.Provider>
86+
);
87+
}
88+
// --repl-after
89+
render(<App />, document.getElementById('app'));
90+
```
6191

6292
```jsx
6393
// --repl
64-
import { render, createContext } from "preact";
94+
import { render, createContext } from 'preact';
95+
import { useContext } from 'preact/hooks';
6596

6697
const SomeComponent = props => props.children;
6798
// --repl-before
68-
const ThemePrimary = createContext("#673ab8");
99+
const ThemePrimary = createContext('#673ab8');
69100

70101
function ThemedButton() {
71-
return (
72-
<ThemePrimary.Consumer>
73-
{theme => <button style={{ background: theme }}>Переключить тему</button>}
74-
</ThemePrimary.Consumer>
75-
);
102+
const theme = useContext(ThemePrimary);
103+
return <button style={{ background: theme }}>Стилизованная кнопка</button>;
76104
}
77105

78106
function App() {
79-
return (
80-
<ThemePrimary.Provider value="#8f61e1">
81-
<SomeComponent>
82-
<ThemedButton />
83-
</SomeComponent>
84-
</ThemePrimary.Provider>
85-
);
107+
return (
108+
<ThemePrimary.Provider value="#8f61e1">
109+
<SomeComponent>
110+
<ThemedButton />
111+
</SomeComponent>
112+
</ThemePrimary.Provider>
113+
);
86114
}
87115
// --repl-after
88-
render(<App />, document.getElementById("app"));
116+
render(<App />, document.getElementById('app'));
89117
```
90118

91119
```jsx
92120
// --repl
93-
import { render, createContext } from "preact";
94-
import { useContext } from "preact/hooks";
121+
import { render, createContext } from 'preact';
95122

96123
const SomeComponent = props => props.children;
97124
// --repl-before
98-
const ThemePrimary = createContext("#673ab8");
125+
const ThemePrimary = createContext('#673ab8');
99126

100127
function ThemedButton() {
101-
const theme = useContext(ThemePrimary);
102-
return <button style={{ background: theme }}>Переключить тему</button>;
128+
return (
129+
<ThemePrimary.Consumer>
130+
{theme => <button style={{ background: theme }}>Стилизованная кнопка</button>}
131+
</ThemePrimary.Consumer>
132+
);
103133
}
104134

105135
function App() {
106-
return (
107-
<ThemePrimary.Provider value="#8f61e1">
108-
<SomeComponent>
109-
<ThemedButton />
110-
</SomeComponent>
111-
</ThemePrimary.Provider>
112-
);
136+
return (
137+
<ThemePrimary.Provider value="#8f61e1">
138+
<SomeComponent>
139+
<ThemedButton />
140+
</SomeComponent>
141+
</ThemePrimary.Provider>
142+
);
113143
}
114144
// --repl-after
115-
render(<App />, document.getElementById("app"));
145+
render(<App />, document.getElementById('app'));
116146
```
117147

118148
</tab-group>
@@ -123,43 +153,43 @@ render(<App />, document.getElementById("app"));
123153

124154
```jsx
125155
// --repl
126-
import { render, createContext } from "preact";
127-
import { useContext, useState } from "preact/hooks";
156+
import { render, createContext } from 'preact';
157+
import { useContext, useState } from 'preact/hooks';
128158

129159
const SomeComponent = props => props.children;
130160
// --repl-before
131161
const ThemePrimary = createContext(null);
132162

133163
function ThemedButton() {
134-
const { theme } = useContext(ThemePrimary);
135-
return <button style={{ background: theme }}>Переключить тему</button>;
164+
const { theme } = useContext(ThemePrimary);
165+
return <button style={{ background: theme }}>Стилизованная кнопка</button>;
136166
}
137167

138168
function ThemePicker() {
139-
const { theme, setTheme } = useContext(ThemePrimary);
140-
return (
141-
<input
142-
type="color"
143-
value={theme}
144-
onChange={e => setTheme(e.currentTarget.value)}
145-
/>
146-
);
169+
const { theme, setTheme } = useContext(ThemePrimary);
170+
return (
171+
<input
172+
type="color"
173+
value={theme}
174+
onChange={e => setTheme(e.currentTarget.value)}
175+
/>
176+
);
147177
}
148178

149179
function App() {
150-
const [theme, setTheme] = useState("#673ab8");
151-
return (
152-
<ThemePrimary.Provider value={{ theme, setTheme }}>
153-
<SomeComponent>
154-
<ThemedButton />
155-
{" - "}
156-
<ThemePicker />
157-
</SomeComponent>
158-
</ThemePrimary.Provider>
159-
);
180+
const [theme, setTheme] = useState('#673ab8');
181+
return (
182+
<ThemePrimary.Provider value={{ theme, setTheme }}>
183+
<SomeComponent>
184+
<ThemedButton />
185+
{' - '}
186+
<ThemePicker />
187+
</SomeComponent>
188+
</ThemePrimary.Provider>
189+
);
160190
}
161191
// --repl-after
162-
render(<App />, document.getElementById("app"));
192+
render(<App />, document.getElementById('app'));
163193
```
164194

165195
## Устаревший Context API
@@ -172,35 +202,31 @@ render(<App />, document.getElementById("app"));
172202

173203
```jsx
174204
// --repl
175-
import { render } from "preact";
205+
import { render } from 'preact';
176206

177207
const SomeOtherComponent = props => props.children;
178208
// --repl-before
179209
function ThemedButton(_props, context) {
180-
return (
181-
<button style={{ background: context.theme }}>
182-
Переключить тему
183-
</button>
184-
);
210+
return <button style={{ background: context.theme }}>Стилизованная кнопка</button>;
185211
}
186212

187213
class App extends Component {
188-
getChildContext() {
189-
return {
190-
theme: "#673ab8"
191-
}
192-
}
193-
194-
render() {
195-
return (
196-
<div>
197-
<SomeOtherComponent>
198-
<ThemedButton />
199-
</SomeOtherComponent>
200-
</div>
201-
);
202-
}
214+
getChildContext() {
215+
return {
216+
theme: '#673ab8'
217+
};
218+
}
219+
220+
render() {
221+
return (
222+
<div>
223+
<SomeOtherComponent>
224+
<ThemedButton />
225+
</SomeOtherComponent>
226+
</div>
227+
);
228+
}
203229
}
204230
// --repl-after
205-
render(<App />, document.getElementById("app"));
231+
render(<App />, document.getElementById('app'));
206232
```

0 commit comments

Comments
 (0)