React学习(1) props & state

Posted on | In

创建一个基本的react 组件

首先使用ES6 class 语法建立简单的Component。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <h1>My React Component</h1>  
              </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

props的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <Presenter name="lvino"/>  
              </div>
    }
}

const Presenter = (props)=>{
    render(){
        return <div>
                 <p>{this.props.name}</p>
                </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

可以看到在无状态组件Presenter中通过props调用了父组件中设定好的name。
可以通过

1
2
3
Presenter.defaultProps{
    name: "lvino"
}

来设定默认的props

还可以通过

1
2
3
Presenter.propTypes{
    name: PropTypes.number.isRequired
}

来设定prop要求的类型，更多的API在官方文档中有

state的使用

在组件中定义state十分简单

1
2
3
4
this.state={
    name: "lvino",
    count: 0
}

父组件和子组件中通过state和prop可以进行数据的交互，一个简单的sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return <div>
                  <h1>My React Component</h1>  
              </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

简单的组件间通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
class MyComponents extends React.Component{
    constructor(props){
        super(props);
    }
    //建立state
    this.state={
    name: "lvino",
    count: 0
}
    //绑定this到本组件
    this.handleClick = this.handleClick.bind(this);
    //javascript 交互函数
    handleClick(){
        this.setState({
            count: this.state.count+1
        })
    }

    render(){
        return <div>
                {/*state 传递数据及函数给子组件*/}
                  <Presenter name={this.state.name} count={this.state.count handleClick={this.handleClick}}/>  
              </div>
    }
}

const Presenter = (props)=>{
    render(){
        return <div>
                {/*子组件使用props展现数据，以及调用函数*/}
                
                 <p>{this.props.name} {this.props.count}</p>
                 <button onClick={this.props.handleClick}></button>
                </div>
    }
}

ReactDOM.render(
    <MyComponents />, document.getElementById("test");
)

....
<div id="test">
....

关键点在于涉及组件状态的改变一律使用setState()