From 8cd49822aa586ed4f33a625f6f15d9365f6e1b50 Mon Sep 17 00:00:00 2001 From: Alex Zherdev Date: Thu, 7 Jul 2016 08:29:54 +0300 Subject: [PATCH] Create 02.2-jsx-spread.ru-RU.md --- docs/docs/02.2-jsx-spread.ru-RU.md | 52 ++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 docs/docs/02.2-jsx-spread.ru-RU.md diff --git a/docs/docs/02.2-jsx-spread.ru-RU.md b/docs/docs/02.2-jsx-spread.ru-RU.md new file mode 100644 index 0000000000000..57ff7e56aaf82 --- /dev/null +++ b/docs/docs/02.2-jsx-spread.ru-RU.md @@ -0,0 +1,52 @@ +--- +id: jsx-spread-ru-RU +title: Расширение атрибутов в JSX +permalink: jsx-spread-ru-RU.html +prev: jsx-in-depth-ru-RU.html +next: jsx-gotchas.html +--- + +Если вы заранее знаете все свойства, которые хотите поместить в компонент, это легко выразить в JSX: + +```javascript + var component = ; +``` + +## Изменять props - плохая практика + +Если вы не знаете, какие свойства хотите установить, то есть соблазн добавить их в объект позже: + +```javascript + var component = ; + component.props.foo = x; // плохо + component.props.bar = y; // тоже плохо +``` + +Это анти-паттерн, так как в этом случае мы не поможем сверить propTypes до очень позднего момента. Это означает, что ошибки в propTypes будут выведены с трудновоспринимаемыми стеками. + +Props следует считать неизменяемыми. Изменение объекта props в других местах может привести к неожиданным последствиями, так что в идеале на данный момент это будет замороженный объект. + +## Расширение атрибутов + +Теперь вы можете воспользоваться новой возможностью JSX под названием "расширение атрибутов": + +```javascript + var props = {}; + props.foo = x; + props.bar = y; + var component = ; +``` + +Свойства объекта, который вы передаете, копируются в props компонента. + +Этим можно пользоваться множество раз или в сочетании с другими атрибутами. Порядок указания важен. Последующие атрибуты замещают предыдущие. + +```javascript + var props = { foo: 'default' }; + var component = ; + console.log(component.props.foo); // 'override' +``` + +## Что за странная нотация `...`? + +Оператор `...` (или оператор расширения) уже поддерживается для [массивов в ES6](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_operator). Также внесено предложение в ECMAScript для [оставшихся свойств и расширения свойств объектов](https://github.com/sebmarkbage/ecmascript-rest-spread). Пользуясь этими уже поддерживаемыми и еще разрабатываемыми стандартами, мы обеспечиваем более чистый синтаксис в JSX.