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) {