gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve russian translation in article (React) (#20403)

Browse Source
This commit is contained in:
Alexey Mikhaylov
2018-10-28 13:06:05 +03:00
committed by Gregory Gubarev
parent 243a303176
commit 7f2cdf414a
1 changed files with 84 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

167
guide/russian/react/state-vs-props/index.md
View File

@ -1,85 +1,86 @@
--- ---
title: State vs Props title: State vs Props
localeTitle: Государство против реквизита localeTitle: Состояние и свойства
--- ---
## Государство против реквизита ## Состояние и свойства
Когда мы начинаем работать с компонентами React, мы часто слышим два термина. Это `state` и `props` . Итак, в этой статье мы рассмотрим, что это такое и как они отличаются. Когда мы начинаем работать с компонентами React, мы часто слышим два термина. Это `state` и `props` . Итак, в этой статье мы рассмотрим, что это такое и чем они отличаются.
## Государственный: ## Состояние:
* Состояние - это то, что принадлежит компоненту. Он принадлежит к тому конкретному компоненту, где он определен. Например, возраст человека - это состояние этого человека. * Состояние - это то, что принадлежит компоненту. Оно принадлежит к тому конкретному компоненту, где оно определено. Например, возраст человека - это состояние этого человека.
* Состояние изменчиво. Но он может быть изменен только тем компонентом, который ему владеет. Поскольку я могу изменить свой возраст, а не кого-либо еще. * Состояние изменчиво. Но оно может быть изменено только тем компонентом, который им владеет. Так я могу изменить свой возраст, а не кто-либо еще.
* Вы можете изменить состояние, используя `this.setState()` * Вы можете изменить состояние, используя `this.setState()`
См. Приведенный ниже пример, чтобы получить представление о состоянии: См. Приведенный ниже пример, чтобы получить представление о состоянии:
#### Person.js #### Person.js
```javascript ```javascript
import React from 'react'; import React from 'react';
class Person extends React.Component{ class Person extends React.Component{
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
age:0 age:0
this.incrementAge = this.incrementAge.bind(this) this.incrementAge = this.incrementAge.bind(this)
} }
incrementAge(){ incrementAge(){
this.setState({ this.setState({
age:this.state.age + 1; age:this.state.age + 1;
}); });
} }
render(){ render(){
return( return(
<div> <div>
<label>My age is: {this.state.age}</label> <label>My age is: {this.state.age}</label>
<button onClick={this.incrementAge}>Grow me older !!<button> <button onClick={this.incrementAge}>Grow me older !!<button>
</div> </div>
); );
} }
} }
export default Person; export default Person;
``` ```
В приведенном выше примере `age` - это состояние компонента `Person` . В приведенном выше примере `age` - это состояние компонента `Person`.
## Реквизит: ## Свойства:
* Опоры похожи на аргументы метода. Они передаются компоненту, в котором используется этот компонент. * Свойства похожи на аргументы метода. Они передаются в компонент, в котором используются.
* Реквизит неизменен. Они доступны только для чтения. * Свойства неизмененны. Они доступны только для чтения.
См. Пример ниже, чтобы получить представление о реквизитах: См. Пример ниже, чтобы получить представление о реквизитах:
#### Person.js #### Person.js
```javascript ```javascript
import React from 'react'; import React from 'react';
class Person extends React.Component{ class Person extends React.Component{
render(){ render(){
return( return(
<div> <div>
<label>I am a {this.props.character} person.</label> <label>I am a {this.props.character} person.</label>
</div> </div>
); );
} }
} }
export default Person; export default Person;
const person = <Person character = "good"></Person> const person = <Person character = "good"></Person>
``` ```
В приведенном выше примере `const person = <Person character = "good"></Person>` мы передаем `character = "good"` prop к компоненту `Person` . В приведенном выше примере `const person = <Person character = "good"></Person>` мы передаем свойство `character` со значением `good` в компонент `Person`.
Это дает результат как «Я хороший человек», на самом деле я. На выходе получаем «Я хороший человек», на самом деле так и есть.
Гораздо больше узнать о государстве и реквизитах. Многие вещи можно узнать, фактически погрузившись в кодирование. Так что заставляйте свои руки грязно кодировать. Есть ещё много всего, что стоит узнать о состоянии и свойствах. Многие вещи можно узнать, только погрузившись в кодирование. Поэтому пробуйте, пишите код, делайте ошибки, учитесь.
При необходимости вытащите меня на [твиттере](https://twitter.com/getifyJr) . При необходимости найдите меня на [твиттере](https://twitter.com/getifyJr) .
Счастливого кодинга !!!