10天学完React——03、组件之间的props通信

各个组件之间进行页面交互渲染的时候，经常需要实现state数据传值，以及不同组件之间函数的调用

props将作为组件之间交互的桥梁

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

/*
 接收数据 

*/
class Hello extends React.Component{
    render(){
        console.log('接收到的值:' + this.props)
        return (
            <div>
                <h1>props:{this.props.age}</h1>                
            </div>
        )
    }
}


// 传递数据
ReactDOM.render(<Hello  name="rose" age={19}/>, document.getElementById('root'))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在渲染的Hello组件中增加name=“rose” age = {19}这两个属性。

组件内部通过获取this.props即可。

props获取的值为只读，不可修改

更新视图后：

————组件之间传值的三种方式

1、父组件向子组件传值

首先在父组件中提供state初始数据

在子组件上添加属性，属性值为要传递的值

通过props接收

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'


//引入样式
import './index.css'
/*
 props

*/
//父组件
class Parent extends React.Component{
    state={msg:'今天学习了吗？'}
    render(){
       
        return (
            <div className='parent'>
                父组件:<Child  msg={this.state.msg}/>          
            </div>
        )
    }
}

//子组件
const Child=props=>{
    console.log('子组件',props)
    return (
        <div className='child'>
          来自父组件传来的值: <span className='data'>{props.msg}</span> 
        </div>
    )
}


// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))
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

2、子组件向父组件传值

    利用回调函数，父组件提供回调函数，子组件中进行调用，将值作为该函数传递的形参
1

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'


//引入样式
import './index.css'
/*
 props

*/
//父组件
class Parent extends React.Component{
    state={parentMsg:''}

    //提供回调函数，用来接收数据
    getChildMsg=data=>{
    console.log('来自子组件中的值：',data)
     this.setState({
        parentMsg:data
     })
    }
    render(){
       
        return (
            <div className='parent'>
                父组件:{this.state.parentMsg} 
                <Child getChildMsg={this.getChildMsg} />        
            </div>
        )
    }
}

//子组件
class Child extends React.Component{

    state={
        msg:'今天学习了react传值'
    }

    //调用父组件中的回调函数
    handleClick=()=>{
        this.props.getChildMsg(this.state.msg)
    }
   render(){
     return (
        <div className='child'>
          <button onClick={this.handleClick}>点击传值</button>
        </div>
    )
   }
   
}


// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))
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
45
46
47
48
49
50
51
52
53
54
55
56
57

3、兄弟组件之间传值

   将共享状态提升到最近的父组件中，由公共的父组件进行管理状态
1

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

/*
 props

*/
//父组件
class Parent extends React.Component {

    //提供共享状态

    state = { count: 0 }

    //提供修改状态的方法
    onInCrement = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {

        return (
            <div className='parent'>
                <Child1 count={this.state.count} />
                <Child2 onInCrement={this.onInCrement} />
            </div>
        )
    }
}

//子组件1
class Child1 extends React.Component {
    render() {
        return (
            <h1>计数器：{this.props.count}</h1>

        )
    }

}

class Child2 extends React.Component {
    add = () => {
        this.props.onInCrement()
    }
    render() {
        return (
            <button onClick={this.add}>+1</button>
        )
    }

}


// 传递数据
ReactDOM.render(<Parent />, document.getElementById('root'))

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

公共状态和修改状态值方法都在父组件中，只要子组件中调用了父组件中的方法，任何接收的状态值都将发生改变

4、跨组件传递数据

若涉及组件的多层嵌套，若A组件中调用B组件，B组件中又调用C,通过一层一层添加属性会显得十分繁琐，这种情况下就可以使用Context

context提供了两个组件，分别是Provider(提供数据)和Consumer(消费数据)，对应使用在父组件和数据接收组件上。

使用之前调用该组件

const {Provider,Consumer} = React.createContext()
1

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

/*
context

*/
import "./index.css"

const { Provider, Consumer } = React.createContext();

class App extends React.Component {
    render() {
        return (

            <Provider value="pink">
                <div className='app'>
                    <Node></Node>
                </div>
            </Provider>
        )
    }
}

const Node = props =>{
   return (
    <div className='node'>
      <SubNode />
    </div>
   )
}

const SubNode = props =>{
    return (
     <div className='subnode'>
       <Child />
     </div>
    )
 }

 const Child = props =>{
    return (
        <div className='child'>
            <Consumer>{data=><span>我是子节点------{data} </span>}</Consumer>
        </div>
    )
 }




// 传递数据
ReactDOM.render(<App />, document.getElementById('root'))

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
45
46
47
48
49
50
51
52
53
54
55

5、children属性获取子节点

——表示组件标签的子节点，任何组件只要有子节点就会有该属性
——通过children属性获取的值可以是任意类型，包括文本，React元素，组件，甚至是函数

/*
children属性

*/
const Test = () => <button>我是button组件</button>
const App = props => {
    console.log(props)
    // props.children()

    return (
        <div>
            <h1>组件标签的子节点</h1>
            {props.children}
        </div>
    )

}

ReactDOM.render(<App><Test /></App>, document.getElementById('root'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

6、props校验

——对于组件来说，props是外来的，可能是任意类型的数据，在不确定数据类型的情况下进行操作难免会报错

——在创建组件时，指定props的类型，格式
——使用步骤：
1、安装包prop-types(yarn add prop-types / npm install prop-types)
2、导入包prop-types包‘
3、使用组件名 propTypes = {}来给组件props添加约束规则

// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

/*
props校验

*/
import PropTypes from 'prop-types'
const App = props => {
   const arr = props.colors
   const lis = arr.map((item,index)=><li key={index}>{item}</li>)

    return (
       <ul>{lis}</ul>
    )

}

ReactDOM.render(<App colors={['blue','green']}> </App>, document.getElementById('root'))

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21