Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Transalte catalog: Warnings #890

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Transalte catalog: Warnings #890

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions src/content/warnings/invalid-aria-prop.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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).
84 changes: 43 additions & 41 deletions src/content/warnings/invalid-hook-call-warning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,55 @@
---
title: Rules of Hooks
title: Правила использования крючков
---

Скорее всего, вы перешли на эту страницу, потому что получили следующее сообщение об ошибке:
Вероятно, вы здесь, потому что получили следующее сообщение об ошибке:

<ConsoleBlock level="error">

Hooks can only be called inside the body of a function component.
Перехватчики могут быть вызваны только внутри тела функционального компонента.

</ConsoleBlock>

Есть три основные причины, по которым вы могли увидеть это предупреждение:

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 }) {
Expand Down Expand Up @@ -79,15 +79,15 @@ function Bad({ cond }) {

function Bad() {
function handleClick() {
// 🔴 Плохо: внутри обработчика событий (для исправления переместите его на уровень выше!)
// 🔴 Bad: inside an event handler (to fix, move it outside!)
const theme = useContext(ThemeContext);
}
// ...
}

function Bad() {
const style = useMemo(() => {
// 🔴 Плохо: использование внутри useMemo (для исправления переместите его на уровень выше!)
// 🔴 Bad: inside useMemo (to fix, move it outside!)
const theme = useContext(ThemeContext);
return createStyle(theme);
});
Expand All @@ -103,54 +103,56 @@ 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), чтобы уловить эти ошибки.

<Note>

[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) *может* вызывать другие перехватчики (в этом вся их цель). Это работает, потому что пользовательские перехватчики также должны вызываться только во время рендеринга функционального компонента.

</Note>

## 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 для управления пакетами, вы можете запустить эту проверку в папке вашего проекта:

<TerminalBlock>

npm ls react

</TerminalBlock>

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 приложения.

<Note>

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`, с помощью которой он был отрисован.

</Note>

## Другие случаи {/*other-causes*/}
## Другие причины {/*other-causes*/}

Если ни одно из решений не помогло, пожалуйста, оставьте комментарий в [этом ишью](https://github.com/facebook/react/issues/13991), после чего мы постараемся вам помочь. Попробуйте также создать небольшой пример, который воспроизводит вашу проблему.
Если ничего из этого не сработало, пожалуйста, прокомментируйте в [this issue](https://github.com/facebook/react/issues/13991) и мы постараемся помочь. Попробуйте создать небольшой воспроизводящий пример — возможно, вы обнаружите проблему в процессе работы.
6 changes: 3 additions & 3 deletions src/content/warnings/special-props.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: `<ListItemWrapper key={result.id} id={result.id} />` and read `props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
Например, вы не можете прочитать `props.key` из компонента. Если вам нужно получить доступ к тому же значению внутри дочернего компонента, вы должны передать его как другой реквизит (например: `<ListItemWrapper key={result.id } id={result.id } />` и прочитать `props.id `). Хотя это может показаться излишним, важно отделять логику приложения от подсказок для реагирования.
Loading