diff --git a/src/content/warnings/invalid-aria-prop.md b/src/content/warnings/invalid-aria-prop.md
index 2d3b4253e..f98d36c70 100644
--- a/src/content/warnings/invalid-aria-prop.md
+++ b/src/content/warnings/invalid-aria-prop.md
@@ -1,11 +1,11 @@
---
-title: Invalid ARIA Prop Warning
+title: Недопустимое предупреждение ARIA Prop
---
-This warning will fire if you attempt to render a DOM element with an `aria-*` prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
+Это предупреждение сработает, если вы попытаетесь отобразить элемент DOM с опцией `aria-*`, которая не существует в Web Accessibility Initiative (WAI), доступном расширенном интернет-приложении (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
+1. Если вы чувствуете, что используете правильный реквизит, внимательно проверьте орфографию. 'aria-labelledby' и 'aria-activedescendant' часто пишутся с ошибками.
-2. If you wrote `aria-role`, you may have meant `role`.
+2. Если вы написали `aria-role`, возможно, вы имели в виду `role`.
-3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose).
+3. В противном случае, если вы используете последнюю версию React DOM и подтвердили, что используете допустимое имя свойства, указанное в спецификации ARIA, пожалуйста, [report a bug](https://github.com/facebook/react/issues/new/choose).
\ No newline at end of file
diff --git a/src/content/warnings/invalid-hook-call-warning.md b/src/content/warnings/invalid-hook-call-warning.md
index 04dd4a6ac..1cb2ac7bc 100644
--- a/src/content/warnings/invalid-hook-call-warning.md
+++ b/src/content/warnings/invalid-hook-call-warning.md
@@ -1,55 +1,55 @@
---
-title: Rules of Hooks
+title: Правила использования крючков
---
-Скорее всего, вы перешли на эту страницу, потому что получили следующее сообщение об ошибке:
+Вероятно, вы здесь, потому что получили следующее сообщение об ошибке:
-Hooks can only be called inside the body of a function component.
+Перехватчики могут быть вызваны только внутри тела функционального компонента.
-
-Есть три основные причины, по которым вы могли увидеть это предупреждение:
-1. You might be **breaking the Rules of Hooks**.
-2. You might have **mismatching versions** of React and React DOM.
-3. You might have **more than one copy of React** in the same app.
+Есть три распространенные причины, по которым вы можете это видеть:
-Разберём каждый из этих случаев.
+1. Возможно, вы **нарушаете правила Хуков**.
+2. У вас могут быть **несовпадающие версии** React и React DOM.
+3. У вас может быть **более одной копии React** в одном приложении.
-## Breaking Rules of Hooks {/*breaking-rules-of-hooks*/}
+Давайте рассмотрим каждый из этих случаев.
-Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+## Нарушение правил использования крючков {/*breaking-rules-of-hooks*/}
-**Don’t call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+Вызываются функции, имена которых начинаются с `use`. [*Hooks*](/reference/react) в React.
-* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
-* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+**Не вызывайте перехватчики внутри циклов, условий или вложенных функций.** Вместо этого всегда используйте перехватчики на верхнем уровне вашей функции React, прежде чем выполнять какие-либо ранние возвраты. Вы можете вызывать перехватчики только в то время, когда React выполняет рендеринг функционального компонента:
+
+* ✅ Вызывайте их на верхнем уровне в теле [function component](/learn/your-first-component).
+* ✅ Вызывайте их на верхнем уровне в теле [custom Hook](/learn/reusing-logic-with-custom-hooks).
```js{2-3,8-9}
function Counter() {
- // ✅ Хорошо: хук на верхнем уровне функционального компонента
+ // ✅ Good: top-level in a function component
const [count, setCount] = useState(0);
// ...
}
function useWindowWidth() {
- // ✅ Хорошо: хук на верхнем уровне пользовательского хука
+ // ✅ Good: top-level in a custom Hook
const [width, setWidth] = useState(window.innerWidth);
// ...
}
```
-It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+**Не** Поддерживается вызов перехватчиков (функций, начинающихся с `use`) в любых других случаях, например:
-* 🔴 Do not call Hooks inside conditions or loops.
-* 🔴 Do not call Hooks after a conditional `return` statement.
-* 🔴 Do not call Hooks in event handlers.
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
+* 🔴 Не вызывайте перехватчики внутри условий или циклов.
+* 🔴 Не вызывайте перехватчики после условного оператора `return`.
+* 🔴 Не вызывайте перехватчики в обработчиках событий.
+* 🔴 Не вызывайте перехватчики в компонентах класса.
+* 🔴 Не вызывайте перехватчики внутри функций, передаваемых в "use Memory", `use Reduced` или `use Effect`.
-При нарушении перечисленных правил, можно столкнуться с этой ошибкой.
+Если вы нарушите эти правила, вы можете увидеть эту ошибку.
```js{3-4,11-12,20-21}
function Bad({ cond }) {
@@ -79,7 +79,7 @@ function Bad({ cond }) {
function Bad() {
function handleClick() {
- // 🔴 Плохо: внутри обработчика событий (для исправления переместите его на уровень выше!)
+ // 🔴 Bad: inside an event handler (to fix, move it outside!)
const theme = useContext(ThemeContext);
}
// ...
@@ -87,7 +87,7 @@ function Bad() {
function Bad() {
const style = useMemo(() => {
- // 🔴 Плохо: использование внутри useMemo (для исправления переместите его на уровень выше!)
+ // 🔴 Bad: inside useMemo (to fix, move it outside!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
@@ -103,23 +103,25 @@ class Bad extends React.Component {
}
```
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+Вы можете использовать [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы уловить эти ошибки.
-[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *может* вызывать другие перехватчики (в этом вся их цель). Это работает, потому что пользовательские перехватчики также должны вызываться только во время рендеринга функционального компонента.
-## Mismatching Versions of React and React DOM {/*mismatching-versions-of-react-and-react-dom*/}
+## Несовпадающие версии React и React DOM {/*mismatching-versions-of-react-and-react-dom*/}
+
+Возможно, вы используете версию `react-dom` (< 16.8.0) или `react-native` (< 0.59), которая еще не поддерживает перехватчики. Вы можете запустить `npm ls react-dom` или `npm ls react-native` в папке вашего приложения, чтобы проверить, какую версию вы используете. Если вы обнаружите более одного из них, это также может создать проблемы (подробнее об этом ниже).
-You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
+ ## Дублирующий React {/*duplicate-react*/}
-## Duplicate React {/*duplicate-react*/}
+Чтобы хуки работали, импорт `react` из кода вашего приложения должен быть разрешен в том же модуле, что и импорт `react` из пакета `react-dom`.
-Если эти `react` импорты ссылаются на два разных объекта экспорта, вы увидите такое предупреждение. Это произойдёт, если у вас случайно **оказалось несколько копий** пакета `react`
+Если этот импорт `react` преобразуется в два разных объекта экспорта, вы увидите это предупреждение. Это может произойти, если у вас **случайно окажутся две копии** пакета `react`.
-Если вы используете Node для управления пакетами, можете проверить копии пакета, находясь в папке проекта:
+Если вы используете Node для управления пакетами, вы можете запустить эту проверку в папке вашего проекта:
@@ -127,30 +129,30 @@ npm ls react
-If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
+Если вы видите более одного React, вам нужно будет выяснить, почему это происходит, и исправить ваше дерево зависимостей. Например, возможно, библиотека, которую вы используете, неправильно определяет `react` как зависимость (а не одноранговую зависимость). Пока эта библиотека не будет исправлена, [разрешения Yarn](https://yarnpkg.com/lang/en/docs/selective-version-resolutions /) - это один из возможных обходных путей.
-Вы также можете попробовать отладить эту проблему, добавив логирование и перезапустив сервер разработки:
+Вы также можете попытаться устранить эту проблему, добавив несколько журналов и перезапустив свой сервер разработки:
```js
-// Добавьте это в файл node_modules/react-dom/index.js
+// Добавьте это в node_modules/react-dom/index.js
window.React1 = require('react');
-// Добавьте это в ваш файл с компонентом
+// Добавьте это в свой файл компонента
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);
```
-Если код выше выводит `false`, то у вас может быть две версии React, а значит требуется выяснить, как это произошло. [Данное ишью](https://github.com/facebook/react/issues/13991) содержит некоторые распространённые причины, обнаруженные сообществом.
+Если он выводит "false", то у вас могут быть две реакции, и вам нужно выяснить, почему это произошло. [This issue](https://github.com/facebook/react/issues/13991) включает в себя некоторые распространенные причины, с которыми сталкивается сообщество.
-Эта проблема также может возникнуть при использовании команды `npm link` или ей подобной. В таком случае ваш бандлер может «увидеть» два пакета React -- один в папке приложения, а другой в папке вашей библиотеки. При условии, что `myapp` и `mylib` -- папки, находящиеся на одном уровне, выполнение `npm link ../myapp/node_modules/react` из-под папки `mylib` может помочь вам. Это должно заставить библиотеку использовать React-копию из приложения.
+Эта проблема также может возникнуть, когда вы используете "npm link" или что-то подобное. В этом случае ваш пакетировщик может "увидеть" две реакции — одну в папке приложения и одну в папке вашей библиотеки. Предполагая, что `my app` и `mylib` являются родственными папками, одним из возможных исправлений является запуск `npm link ../myapp/node_modules/react` из `mylib`. Это должно заставить библиотеку использовать копию React приложения.
-In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
+В целом, React поддерживает использование нескольких независимых копий на одной странице (например, если приложение и сторонний виджет используют его одновременно). Он прерывается только в том случае, если `require('react')` разрешает по-разному между компонентом и копией `react-dom`, с помощью которой он был отрисован.
-## Другие случаи {/*other-causes*/}
+## Другие причины {/*other-causes*/}
-Если ни одно из решений не помогло, пожалуйста, оставьте комментарий в [этом ишью](https://github.com/facebook/react/issues/13991), после чего мы постараемся вам помочь. Попробуйте также создать небольшой пример, который воспроизводит вашу проблему.
+Если ничего из этого не сработало, пожалуйста, прокомментируйте в [this issue](https://github.com/facebook/react/issues/13991) и мы постараемся помочь. Попробуйте создать небольшой воспроизводящий пример — возможно, вы обнаружите проблему в процессе работы.
diff --git a/src/content/warnings/special-props.md b/src/content/warnings/special-props.md
index 1646b531a..691803f36 100644
--- a/src/content/warnings/special-props.md
+++ b/src/content/warnings/special-props.md
@@ -1,7 +1,7 @@
---
-title: Special Props Warning
+title: Предупреждение о специальных реквизитах
---
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
+Большинство реквизитов элемента JSX передаются компоненту, однако есть два специальных реквизита (`ref` и `key`), которые используются React и, таким образом, не пересылаются компоненту.
-For instance, you can't read `props.key` from a component. If you need to access the same value within the child component, you should pass it as a different prop (ex: `` and read `props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
+Например, вы не можете прочитать `props.key` из компонента. Если вам нужно получить доступ к тому же значению внутри дочернего компонента, вы должны передать его как другой реквизит (например: `` и прочитать `props.id `). Хотя это может показаться излишним, важно отделять логику приложения от подсказок для реагирования.
diff --git a/src/content/warnings/unknown-prop.md b/src/content/warnings/unknown-prop.md
index 80bcdb142..8e7a3cdb9 100644
--- a/src/content/warnings/unknown-prop.md
+++ b/src/content/warnings/unknown-prop.md
@@ -1,38 +1,37 @@
---
-title: Unknown Prop Warning
+title: Предупреждение о неизвестном реквизите
---
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+Предупреждение unknown-prop сработает, если вы попытаетесь отобразить элемент DOM с prop, который не распознается React как допустимый атрибут/свойство DOM. Вы должны убедиться, что в ваших элементах DOM нет поддельных реквизитов, плавающих вокруг.
-There are a couple of likely reasons this warning could be appearing:
+Есть несколько вероятных причин, по которым может появиться это предупреждение:
-1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
+1. Используете ли вы `{...props}` или `cloneElement(element, props)`? При копировании реквизитов в дочерний компонент вы должны убедиться, что вы случайно не пересылаете реквизиты, которые предназначались только для родительского компонента. Смотрите общие исправления этой проблемы ниже.
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+2. Вы используете нестандартный атрибут DOM на собственном узле DOM, возможно, для представления пользовательских данных. Если вы пытаетесь прикрепить пользовательские данные к стандартному элементу DOM, рассмотрите возможность использования пользовательского атрибута данных, как описано [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
-
-4. You are using a React component without an upper case, for example ``. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `` instead of ``.
+3. React пока не распознает указанный вами атрибут. Вероятно, это будет исправлено в будущей версии React. React позволит вам передать его без предупреждения, если вы введете имя атрибута в нижнем регистре.
+4. Вы используете компонент React без верхнего регистра, например ``. React интерпретирует его как тег DOM, потому что React JSX transform использует соглашение о верхнем и нижнем регистре для различения пользовательских компонентов и тегов DOM. Для ваших собственных компонентов React используйте PascalCase. Например, напишите `` вместо ``.
+5.
---
-If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
-
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+Если вы получаете это предупреждение из-за того, что передаете реквизиты типа `{...props}`, ваш родительский компонент должен "использовать" любой реквизит, который предназначен для родительского компонента и не предназначен для дочернего компонента. Пример:
+**Ошибка:** Неожиданный реквизит 'layout' перенаправляется в теге 'div'.
```js
function MyDiv(props) {
if (props.layout === 'horizontal') {
- // BAD! Because you know for sure "layout" is not a prop that
understands.
+ // ПЛОХО! Потому что вы точно знаете, что "макет" - это не реквизит, который
понимает.
return
} else {
- // BAD! Because you know for sure "layout" is not a prop that
understands.
+ // ПЛОХО! Потому что вы точно знаете, что "макет" - это не реквизит, который
понимает.
return
}
}
```
-**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
+**Правильно:** Синтаксис spread можно использовать для извлечения переменных из props и помещения оставшихся props в переменную.
```js
function MyDiv(props) {
@@ -45,7 +44,7 @@ function MyDiv(props) {
}
```
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+**Правильно:** Вы также можете назначить реквизиты новому объекту и удалить ключи, которые вы используете, из нового объекта. Обязательно не удаляйте реквизит из исходного объекта `this.props`, поскольку этот объект следует считать неизменяемым.
```js
function MyDiv(props) {