Skip to content

Commit df762f7

Browse files
translate-react-bot[bot]translate-react-bot[bot]
authored
docs: translate createElement.md to Русский
1 parent e5e470e commit df762f7

1 file changed

Lines changed: 10 additions & 13 deletions

File tree

‎src/content/reference/react/createElement.md‎

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
1-
```md
21
---
32
title: createElement
43
---
5-
64
<Intro>
75

8-
`createElement` позволяет создавать React-элемент. Он служит альтернативой написанию [JSX.](/learn/writing-markup-with-jsx)
6+
`createElement` позволяет создавать React-элементы. Это альтернатива написанию [JSX.](/learn/writing-markup-with-jsx)
97

108
```js
119
const element = createElement(type, props, ...children)
@@ -41,9 +39,9 @@ function Greeting({ name }) {
4139

4240
* `type`: Аргумент `type` должен быть допустимым типом React-компонента. Например, это может быть строка с именем тега (например, `'div'` или `'span'`) или React-компонент (функция, класс или специальный компонент, такой как [`Fragment`](/reference/react/Fragment)).
4341

44-
* `props`: Аргумент `props` должен быть либо объектом, либо `null`. Если вы передадите `null`, это будет равносильно передаче пустого объекта. React создаст элемент со свойствами, соответствующими переданным вами `props`. Обратите внимание, что `ref` и `key` из вашего объекта `props` являются специальными и *не* будут доступны как `element.props.ref` и `element.props.key` в возвращаемом `element`. Они будут доступны как `element.ref` и `element.key`.
42+
* `props`: Аргумент `props` должен быть объектом или `null`. Если вы передадите `null`, это будет равносильно передаче пустого объекта. React создаст элемент со свойствами, соответствующими переданным вами `props`. Обратите внимание, что `ref` и `key` из вашего объекта `props` являются специальными и *не* будут доступны как `element.props.ref` и `element.props.key` в возвращаемом `element`. Они будут доступны как `element.ref` и `element.key`.
4543

46-
* **необязательный** `...children`: Ноль или более дочерних узлов. Они могут быть любыми React-узлами, включая React-элементы, строки, числа, [порталы](/reference/react-dom/createPortal), пустые узлы (`null`, `undefined`, `true` и `false`) и массивы React-узлов.
44+
* **необязательный** `...children`: Ноль или более дочерних узлов. Это могут быть любые React-узлы, включая React-элементы, строки, числа, [порталы](/reference/react-dom/createPortal), пустые узлы (`null`, `undefined`, `true` и `false`) и массивы React-узлов.
4745

4846
#### Возвращает {/*returns*/}
4947

@@ -54,15 +52,15 @@ function Greeting({ name }) {
5452
* `ref`: Переданный вами `ref`. Если отсутствует, то `null`.
5553
* `key`: Переданный вами `key`, приведенный к строке. Если отсутствует, то `null`.
5654

57-
Обычно вы возвращаете элемент из своего компонента или делаете его дочерним элементом другого элемента. Хотя вы можете читать свойства элемента, лучше всего после создания относиться ко всем элементам как к непрозрачным и только рендерить их.
55+
Обычно вы возвращаете элемент из своего компонента или делаете его дочерним элементом другого элемента. Хотя вы можете читать свойства элемента, лучше всего рассматривать каждый элемент как непрозрачный после его создания и только рендерить его.
5856

5957
#### Ограничения {/*caveats*/}
6058

61-
* Вы должны **относиться к React-элементам и их props как к [неизменяемым](https://en.wikipedia.org/wiki/Immutable_object)** и никогда не изменять их содержимое после создания. В режиме разработки React будет [замораживать](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) возвращаемый элемент и его свойство `props` на верхнем уровне, чтобы обеспечить это.
59+
* Вы должны **рассматривать React-элементы и их `props` как [неизменяемые](https://en.wikipedia.org/wiki/Immutable_object)** и никогда не изменять их содержимое после создания. В режиме разработки React будет [замораживать](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze) возвращаемый элемент и его свойство `props` на верхнем уровне, чтобы обеспечить это.
6260

63-
* Когда вы используете JSX, **вы должны начинать тег с заглавной буквы, чтобы рендерить собственный пользовательский компонент.** Другими словами, `<Something />` эквивалентно `createElement(Something)`, но `<something />` (строчная буква) эквивалентно `createElement('something')` (обратите внимание, что это строка, поэтому она будет рассматриваться как встроенный HTML-тег).
61+
* Когда вы используете JSX, **вы должны начинать тег с заглавной буквы, чтобы рендерить собственный пользовательский компонент.** Другими словами, `<Something />` эквивалентно `createElement(Something)`, а `<something />` (строчная буква) эквивалентно `createElement('something')` (обратите внимание, что это строка, поэтому она будет рассматриваться как встроенный HTML-тег).
6462

65-
* Вы должны **передавать дочерние элементы в качестве нескольких аргументов `createElement` только в том случае, если они все статически известны,** например `createElement('h1', {}, child1, child2, child3)`. Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: `createElement('ul', {}, listItems)`. Это гарантирует, что React [предупредит вас об отсутствующих `key`](/learn/rendering-lists#keeping-list-items-in-order-with-key) для любых динамических списков. Для статических списков это не требуется, так как они никогда не переупорядочиваются.
63+
* Вы должны **передавать дочерние элементы в качестве нескольких аргументов `createElement` только в том случае, если они все статически известны,** например `createElement('h1', {}, child1, child2, child3)`. Если ваши дочерние элементы динамические, передайте весь массив в качестве третьего аргумента: `createElement('ul', {}, listItems)`. Это гарантирует, что React [предупредит вас об отсутствующих `key`](/learn/rendering-lists#keeping-list-items-in-order-with-key) для любых динамических списков. Для статических списков это не требуется, поскольку они никогда не переупорядочиваются.
6664

6765
---
6866

@@ -88,7 +86,7 @@ function Greeting({ name }) {
8886
}
8987
```
9088

91-
<CodeStep step={3}>Дочерние элементы</CodeStep> необязательны, и вы можете передать столько, сколько вам нужно (в примере выше три дочерних элемента). Этот код отобразит заголовок `<h1>` с приветствием. Для сравнения, вот тот же пример, переписанный с использованием JSX:
89+
<CodeStep step={3}>Дочерние элементы</CodeStep> необязательны, и вы можете передать столько, сколько вам нужно (в приведенном выше примере три дочерних элемента). Этот код отобразит заголовок `<h1>` с приветствием. Для сравнения, вот тот же пример, переписанный с использованием JSX:
9290

9391
```js [[1, 3, "h1"], [2, 3, "className=\\"greeting\\""], [3, 4, "Hello <i>{name}</i>. Welcome!"], [1, 5, "h1"]]
9492
function Greeting({ name }) {
@@ -177,7 +175,7 @@ export default function App() {
177175

178176
</Sandpack>
179177

180-
Оба стиля кодирования подходят, поэтому вы можете использовать тот, который предпочитаете для своего проекта. Основное преимущество использования JSX по сравнению с `createElement` заключается в том, что легко увидеть, какой закрывающий тег соответствует какому открывающему тегу.
178+
Оба стиля кодирования приемлемы, поэтому вы можете использовать тот, который предпочитаете для своего проекта. Основное преимущество использования JSX по сравнению с `createElement` заключается в том, что легко увидеть, какой закрывающий тег соответствует какому открывающему тегу.
181179

182180
<DeepDive>
183181

@@ -203,5 +201,4 @@ React-элемент больше похож на описание — инст
203201

204202
Создание элементов чрезвычайно дешево, поэтому вам не нужно пытаться оптимизировать или избегать этого.
205203

206-
</DeepDive>
207-
```
204+
</DeepDive>

0 commit comments

Comments
 (0)