Change improper translation (#32829)

This commit is contained in:
Leo
2019-01-26 14:04:05 -05:00
committed by Jingyi Ding
parent fef2ed3c11
commit 20607de9ac

View File

@ -1,15 +1,16 @@
--- ---
title: State vs Props title: State vs Props
localeTitle: 州与道具 localeTitle: state 与 props
--- ---
## state 与 props
当我们开始使用React组件时我们经常听到两个术语。他们是`state``props` 。因此,在本文中,我们将探讨它们的含义以及它们之间的区别。 当我们开始使用React组件时我们经常听到两个术语。他们是`state``props` 。因此,在本文中,我们将探讨它们的含义以及它们之间的区别。
## State
* state是类组件拥有的东西。它属于定义它的特定组件。 例如,一个人的年龄是该人的状态。
* 状态是组件拥有的东西。它属于定义它的特定组件。 例如,一个人的年龄是该人的状态 * state的值是可变的。但它只能由拥有它的组件来改变。因为我只能改变我的年龄而不是其他任何人
* 国家是可变的。但它只能由拥有它的组件来改变。因为我只能改变我的年龄,而不是其他任何人。 * 您可以使用`this.setState()`更改组件的state值
请参阅以下示例以了解状态: 请参阅以下示例以了解状态:
@ -18,7 +19,10 @@ localeTitle: 州与道具
```javascript ```javascript
import React from 'react'; import React from 'react';
// 此组件为类类型组件
class Person extends React.Component{ class Person extends React.Component{
// 初始化state
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
@ -26,6 +30,7 @@ localeTitle: 州与道具
this.incrementAge = this.incrementAge.bind(this) this.incrementAge = this.incrementAge.bind(this)
} }
// 修改state值
incrementAge(){ incrementAge(){
this.setState({ this.setState({
age:this.state.age + 1; age:this.state.age + 1;
@ -35,7 +40,7 @@ localeTitle: 州与道具
render(){ render(){
return( return(
<div> <div>
<div> <label>My age is: {this.state.age}</label> //利用this.state.XXX去获取 state
<button onClick={this.incrementAge}>Grow me older !!<button> <button onClick={this.incrementAge}>Grow me older !!<button>
</div> </div>
); );
@ -45,11 +50,11 @@ localeTitle: 州与道具
export default Person; export default Person;
``` ```
在上面的例子中, `age``Person`组件的state。
## Props
* props类似于方法参数。它们被传递到使用该组件的组件。
* 道具是不可改变的。它们是只读的。 * 道具是不可改变的。它们是只读的。
请参阅以下示例以了解道具: 请参阅以下示例以了解道具:
@ -74,12 +79,12 @@ localeTitle: 州与道具
const person = <Person character = "good"></Person> const person = <Person character = "good"></Person>
``` ```
在上面的例子中, `const person = <Person character = "good"></Person>`我们将`const person = <Person character = "good"></Person>` `character = "good"` prop传递给`Person`组件。然后您可以在Person组件中通过 props.character 去调用上层传入的character值。
它输出为“我是一个好人”,事实上我也确实是。
关于state和props我们还有很多东西需要学习。通过实际编程我们可以学到更多东西。因此快去实践吧。
如有需要,请在[推特](https://twitter.com/getifyJr)上与我联系。
编码快乐!!!