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

Translate passing data deeply with context #973

Open

Pyplee wants to merge 5 commits into reactjs:main from Pyplee:translate-passing-data-deeply-with-context

Pyplee commented Sep 26, 2024

No description provided.

Pyplee added 5 commits

September 18, 2024 20:36


          translated from start to title step1

72afc7e


          translated from step1 to title context passes...

611ed2c


          translated from 'context passes...' to end

d53c18e


          review and correction

0e2c9da


          fixing a bug with the start navigation menu (header is too big, when …

72a9198

…switching to the header, it does not show up active in the menu)

vercel bot commented Sep 26, 2024 •

edited

Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
ru-legacy-reactjs-org	⬜️ Ignored (Inspect)	Visit Preview		Sep 26, 2024 11:20am

vercel bot deployed to Preview – ru-react-dev

September 26, 2024 11:21

View deployment

Pyplee mentioned this pull request

New Russian Translation Progress #843

Open

titovmx requested changes

View reviewed changes

Collaborator

titovmx left a comment

Спасибо за перевод! Оставил несколько предложений

src/content/learn/passing-data-deeply-with-context.md

    
              ---

              <Intro>

              Usually, you will pass information from a parent component to a child component via props. But passing props can become verbose and inconvenient if you have to pass them through many components in the middle, or if many components in your app need the same information. *Context* lets the parent component make some information available to any component in the tree below it—no matter how deep—without passing it explicitly through props.

              Обычно вы передаёте информацию от родительского компонента к дочернему с помощью пропсов. Однако такая передача может стать многослойной и неудобной, если необходимо передавать информацию через большое количество промежуточных компонентов или если множеству компонентам в вашем приложении нужна одна и та же информация. *Контекст* позволяет родительскому компоненту предоставлять информацию любому компоненту в дереве под ним, независимо от глубины и не передавая данные явно через пропсы.

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            Обычно вы передаёте информацию от родительского компонента к дочернему с помощью пропсов. Однако такая передача может стать многослойной и неудобной, если необходимо передавать информацию через большое количество промежуточных компонентов или если множеству компонентам в вашем приложении нужна одна и та же информация. *Контекст* позволяет родительскому компоненту предоставлять информацию любому компоненту в дереве под ним, независимо от глубины и не передавая данные явно через пропсы.
          
            Обычно вы передаёте информацию от родительского компонента к дочернему с помощью пропсов. Однако такая передача может стать многослойной и неудобной, если необходимо передавать информацию через большое количество промежуточных компонентов или если множеству компонентов в вашем приложении нужна одна и та же информация. *Контекст* позволяет родительскому компоненту предоставлять информацию любому компоненту в дереве под ним, независимо от глубины и не передавая данные явно через пропсы.

src/content/learn/passing-data-deeply-with-context.md

-              - How to replace repetitive prop passing with context
-              - Common use cases for context
-              - Common alternatives to context
+              - Что такое "проп бурение"

Collaborator

titovmx Nov 13, 2024

могу ошибаться, но по-моему разработчики всегда ссылаются на эту проблему на русском не переводя. поэтому я бы предложил оставить здесь и ещё в паре мест и оригинальный термин:

Что такое "prop drilling" (бурение пропсов)

бурение - интересная интерпретация с точки зрения языка, но мне не очень нравится как согласуются два существительных подряд, одно из которых специфичный для React термин, и по правила в данном случае требуется дефис проп-бурение

src/content/learn/passing-data-deeply-with-context.md

    
              [Passing props](/learn/passing-props-to-a-component) is a great way to explicitly pipe data through your UI tree to the components that use it.

              [Передача пропсов](/learn/passing-props-to-a-component) — это отличный способ явно передать данные через UI дерево компонентам, которые их используют.

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            [Передача пропсов](/learn/passing-props-to-a-component) — это отличный способ явно передать данные через UI дерево компонентам, которые их используют.
          
            [Передача пропсов](/learn/passing-props-to-a-component) — это отличный способ явно передать данные по дереву компонентов туда, где они используются.

src/content/learn/passing-data-deeply-with-context.md

    
              But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling".

              Однако передача пропсов может стать муторной, если вам нужно передать их глубоко в дерево или если множеству компонентам нужен один и тот же проп. Ближайший общий предок может находиться далеко от компонентов, которым нужны данные, и [подъём состояния вверх](/learn/sharing-state-between-components) на такую высоту может привести к ситуации, называемой "проп бурение".

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            Однако передача пропсов может стать муторной, если вам нужно передать их глубоко в дерево или если множеству компонентам нужен один и тот же проп. Ближайший общий предок может находиться далеко от компонентов, которым нужны данные, и [подъём состояния вверх](/learn/sharing-state-between-components) на такую высоту может привести к ситуации, называемой "проп бурение".
          
            Однако передача пропсов может стать муторной, если вам нужно передать их глубоко в дерево или если множеству компонентов нужен один и тот же проп. Ближайший общий предок может находиться далеко от компонентов, которым нужны данные, и [подъём состояния вверх](/learn/sharing-state-between-components) на такую высоту может привести к ситуации, называемой "бурение пропсов" ("prop drilling").

src/content/learn/passing-data-deeply-with-context.md

    
              But passing props can become verbose and inconvenient when you need to pass some prop deeply through the tree, or if many components need the same prop. The nearest common ancestor could be far removed from the components that need data, and [lifting state up](/learn/sharing-state-between-components) that high can lead to a situation called "prop drilling".

              Однако передача пропсов может стать муторной, если вам нужно передать их глубоко в дерево или если множеству компонентам нужен один и тот же проп. Ближайший общий предок может находиться далеко от компонентов, которым нужны данные, и [подъём состояния вверх](/learn/sharing-state-between-components) на такую высоту может привести к ситуации, называемой "проп бурение".

              <DiagramGroup>

              <Diagram name="passing_data_lifting_state" height={160} width={608} captionPosition="top" alt="Diagram with a tree of three components. The parent contains a bubble representing a value highlighted in purple. The value flows down to each of the two children, both highlighted in purple." >

Collaborator

titovmx Nov 13, 2024

пожалуйста, переведите также содержимое тегов alt в диаграммах. Это нужно для хорошей доступности (accessibility) документации

src/content/learn/passing-data-deeply-with-context.md

               </Diagram>
               <Diagram name="passing_data_prop_drilling" height={430} width={608} captionPosition="top" alt="Diagram with a tree of ten nodes, each node with two children or less. The root node contains a bubble representing a value highlighted in purple. The value flows down through the two children, each of which pass the value but do not contain it. The left child passes the value down to two children which are both highlighted purple. The right child of the root passes the value through to one of its two children - the right one, which is highlighted purple. That child passed the value through its single child, which passes it down to both of its two children, which are highlighted purple.">
-              Prop drilling
+              Проп бурение

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            Проп бурение
          
            Бурение пропсов

src/content/learn/passing-data-deeply-with-context.md

    
              </Diagram>

              </DiagramGroup>

              Wouldn't it be great if there were a way to "teleport" data to the components in the tree that need it without passing props? With React's context feature, there is!

              А если представить, что у нас есть возможность "телепортировать" данные в те компоненты дерева, которым они нужны, без передачи пропсов? С помощью функции React Контекст это возможно!

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            А если представить, что у нас есть возможность "телепортировать" данные в те компоненты дерева, которым они нужны, без передачи пропсов? С помощью функции React Контекст это возможно!
          
            А если представить, что у нас есть возможность "телепортировать" данные в те компоненты дерева, которым они нужны, без передачи пропсов? В React это возможно с контекстом!

src/content/learn/passing-data-deeply-with-context.md

    
              Import the `useContext` Hook from React and your context:

              Импортируем хук `useContext` и ваш контекст из React:

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            Импортируем хук `useContext` и ваш контекст из React:
          
            Импортируем хук `useContext` из React и ваш контекст:

src/content/learn/passing-data-deeply-with-context.md

    
              How context works might remind you of [CSS property inheritance.](https://developer.mozilla.org/en-US/docs/Web/CSS/inheritance) In CSS, you can specify `color: blue` for a `<div>`, and any DOM node inside of it, no matter how deep, will inherit that color unless some other DOM node in the middle overrides it with `color: green`. Similarly, in React, the only way to override some context coming from above is to wrap children into a context provider with a different value.

              В CSS разные свойства, такие как `color` и `background-color`, не переопределяют друг друга. Вы можете установить во всех `<div>` свойство `color` на красный, не влияя на `background-color`. Аналогично, **разные контексты React не переопределяют друг друга.** Каждый контекст, который вы создаете с помощью `createContext()` полностью отделен от других и связывает компоненты, использующие и передающие *этот конкретный* контекст. Один компонент может использовать или передавать множество разных контекстов без проблем.

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            В CSS разные свойства, такие как `color` и `background-color`, не переопределяют друг друга. Вы можете установить во всех `<div>` свойство `color` на красный, не влияя на `background-color`. Аналогично, **разные контексты React не переопределяют друг друга.** Каждый контекст, который вы создаете с помощью `createContext()` полностью отделен от других и связывает компоненты, использующие и передающие *этот конкретный* контекст. Один компонент может использовать или передавать множество разных контекстов без проблем.
          
            В CSS разные свойства, такие как `color` и `background-color`, не переопределяют друг друга. Вы можете установить во всех `<div>` свойство `color` на красный, не влияя на `background-color`. Аналогично, **разные контексты React не переопределяют друг друга.** Каждый контекст, который вы создаёте с помощью `createContext()` полностью отделён от других и связывает компоненты, использующие и передающие *этот конкретный* контекст. Один компонент может использовать или передавать множество разных контекстов без проблем.

можете, пожалуйста, также перепроверить перевод на использование буквы ё. Для этого можно использовать пакет eyo

src/content/learn/passing-data-deeply-with-context.md

-              Here's a few alternatives you should consider before using context:
+. **Начните с [передачи пропсов.](/learn/passing-props-to-a-component)** Если ваши компоненты достаточно простые, то нередко приходится передавать множество пропсов вниз через множество компонентов. Это может показаться трудоёмкой задачей, но так становится ясно, какие компоненты используют те или иные данные! Человек, обслуживающий ваш код, будет рад, что вы сделали поток данных явным с помощью пропсов.
+. **Извлекайте компоненты и [передавайте им JSX как `детям`](/learn/passing-props-to-a-component#passing-jsx-as-children).** Если вы передаёте какие-то данные через множество промежуточных компонентов, которые не используют эти данные (а только передают их дальше вниз), это часто означает, что вы забыли извлечь некоторые компоненты на этом пути. Например, вы передаете такие пропсы, как `posts`, визуальным компонентам, которые не используют их напрямую, например, `<Layout posts={posts} />`. Вместо этого сделайте так, чтобы `Layout` принимал `children` в качестве проп и выводил `<Layout><Posts posts={posts} /></Layout>`. Это уменьшает количество слоёв между компонентом, задающим данные, и компонентом, которому они нужны.

Collaborator

titovmx Nov 13, 2024

Suggested change

      
            2. **Извлекайте компоненты и [передавайте им JSX как `детям`](/learn/passing-props-to-a-component#passing-jsx-as-children).** Если вы передаёте какие-то данные через множество промежуточных компонентов, которые не используют эти данные (а только передают их дальше вниз), это часто означает, что вы забыли извлечь некоторые компоненты на этом пути. Например, вы передаете такие пропсы, как `posts`, визуальным компонентам, которые не используют их напрямую, например, `<Layout posts={posts} />`. Вместо этого сделайте так, чтобы `Layout` принимал `children` в качестве проп и выводил `<Layout><Posts posts={posts} /></Layout>`. Это уменьшает количество слоёв между компонентом, задающим данные, и компонентом, которому они нужны.
          
            2. **Извлекайте компоненты и [передавайте им JSX как `детям`](/learn/passing-props-to-a-component#passing-jsx-as-children).** Если вы передаёте какие-то данные через множество промежуточных компонентов, которые не используют эти данные (а только передают их дальше вниз), это часто означает, что вы забыли извлечь некоторые компоненты на этом пути. Например, вы передаете такие пропсы, как `posts`, визуальным компонентам, которые не используют их напрямую, например, `<Layout posts={posts} />`. Вместо этого сделайте так, чтобы `Layout` принимал `children` в качестве пропа и выводил `<Layout><Posts posts={posts} /></Layout>`. Это уменьшает количество слоёв между компонентом, задающим данные, и компонентом, которому они нужны.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet