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