From dcdb3574b4cb4b45119a5d225c28dc2ab45b2c65 Mon Sep 17 00:00:00 2001 From: "ignat.sidash" Date: Thu, 22 Jun 2023 10:03:43 +0300 Subject: [PATCH] add createContext translation --- src/content/reference/react/createContext.md | 77 ++++++++++---------- 1 file changed, 38 insertions(+), 39 deletions(-) diff --git a/src/content/reference/react/createContext.md b/src/content/reference/react/createContext.md index a653633c1..7e47c704f 100644 --- a/src/content/reference/react/createContext.md +++ b/src/content/reference/react/createContext.md @@ -4,7 +4,7 @@ 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 +16,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 +28,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 +61,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 +84,29 @@ function Button() { } ``` -Although this older way still works, but **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