diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index 03b09f8af9..1087892e01 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -1,10 +1,9 @@ --- title: createContext --- - -`createContext` lets you create a [context](/learn/passing-data-deeply-with-context) that components can provide or read. +`createContext` позволяет создавать [контекст](/learn/passing-data-deeply-with-context), который компоненты могут предоставлять или читать. ```js const SomeContext = createContext(defaultValue) @@ -16,11 +15,11 @@ const SomeContext = createContext(defaultValue) --- -## Reference {/*reference*/} +## Справочник {/*reference*/} ### `createContext(defaultValue)` {/*createcontext*/} -Call `createContext` outside of any components to create a context. +Вызовите `createContext` вне любого компонента для создания контекста. ```js import { createContext } from 'react'; @@ -28,26 +27,26 @@ import { createContext } from 'react'; const ThemeContext = createContext('light'); ``` -[See more examples below.](#usage) +[См. больше примеров ниже.](#usage) -#### Parameters {/*parameters*/} +#### Параметры {/*parameters*/} -* `defaultValue`: The value that you want the context to have when there is no matching context provider in the tree above the component that reads context. If you don't have any meaningful default value, specify `null`. The default value is meant as a "last resort" fallback. It is static and never changes over time. +* `defaultValue`: Значение, которое будет иметь контекст, если выше в дереве компонентов, читающих контекст, нет соответствующего провайдера контекста. Если у вас нет значимого значения по умолчанию, укажите `null`. Значение по умолчанию предназначено как «запасной» вариант. Оно статично и никогда не меняется со временем. -#### Returns {/*returns*/} +#### Возвращает {/*returns*/} -`createContext` returns a context object. +`createContext` возвращает объект контекста. -**The context object itself does not hold any information.** It represents _which_ context other components read or provide. Typically, you will use [`SomeContext.Provider`](#provider) in components above to specify the context value, and call [`useContext(SomeContext)`](/reference/react/useContext) in components below to read it. The context object has a few properties: +**Сам объект контекста не содержит никакой информации.** Он представляет собой _идентификатор_, который другие компоненты читают или предоставляют. Обычно вы будете использовать [`SomeContext.Provider`](#provider) в компонентах выше для указания значения контекста и вызывать [`useContext(SomeContext)`](/reference/react/useContext) в компонентах ниже для его чтения. Объект контекста имеет несколько свойств: -* `SomeContext.Provider` lets you provide the context value to components. -* `SomeContext.Consumer` is an alternative and rarely used way to read the context value. +* `SomeContext.Provider` позволяет предоставлять значение контекста компонентам. +* `SomeContext.Consumer` — это альтернативный и редко используемый способ чтения значения контекста. --- ### `SomeContext.Provider` {/*provider*/} -Wrap your components into a context provider to specify the value of this context for all components inside: +Оберните ваши компоненты в провайдер контекста, чтобы указать значение этого контекста для всех компонентов внутри: ```js function App() { @@ -61,19 +60,19 @@ function App() { } ``` -#### Props {/*provider-props*/} +#### Пропсы {/*provider-props*/} -* `value`: The value that you want to pass to all the components reading this context inside this provider, no matter how deep. The context value can be of any type. A component calling [`useContext(SomeContext)`](/reference/react/useContext) inside of the provider receives the `value` of the innermost corresponding context provider above it. +* `value`: Значение, которое вы хотите передать всем компонентам, читающим этот контекст внутри этого провайдера, независимо от их глубины. Значение контекста может быть любого типа. Компонент, вызывающий [`useContext(SomeContext)`](/reference/react/useContext) внутри провайдера, получает `value` от ближайшего соответствующего провайдера контекста над ним. --- ### `SomeContext.Consumer` {/*consumer*/} -Before `useContext` existed, there was an older way to read context: +До появления `useContext` существовал старый способ чтения контекста: ```js function Button() { - // 🟡 Legacy way (not recommended) + // 🟡 Устаревший способ (не рекомендуется) return ( {theme => ( @@ -84,29 +83,29 @@ function Button() { } ``` -Although this older way still works, **newly written code should read context with [`useContext()`](/reference/react/useContext) instead:** +Хотя этот старый способ всё ещё работает, **новый код следует писать с использованием [`useContext()`](/reference/react/useContext) вместо него:** ```js function Button() { - // ✅ Recommended way + // ✅ Рекомендуемый способ const theme = useContext(ThemeContext); return