父组件给子组件传值

　　1. class类组件，父组件在子组件上写入属性，子组件通过this.props.属性名获取值
　　1. 函数式组件，父组件在子组件上写入属性，子组件需要把props作为组件参数才能使用props

子组件给父组件传值

  1. 通过传递回调函数的方式，父组件给子组件传一个回调函数(可带参数)，子组件通过this.props.回调函数名，通过调用回调函数，传入参数来传值

一.父组件向子组件传值

在父组件中引入子组件，将父组件的state值放到子组件标签中传递，在子组件中用this.props.传值名称，接收

父组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react'
import Goods from '../Good/Goods'
 
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      mess: '123' //初始化mess属性
    }
  }
  render() {
    return (
      <div>
          <h1>{this.state.mess}</h1>
            {/* 子组件 */}
          <Goods txt={this.state.mess}></Goods>
      </div>
    )
  }
}

子组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react'
import Goods from '../Good/Goods'
 
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      mess: '123' //初始化mess属性
    }
  }
  render() {
    return (
      <div>
          <h1>{this.state.mess}</h1>
            {/* 子组件 */}
          <Goods txt={this.state.mess}></Goods>
      </div>
    )
  }
}

还可以设置默认值 首先引入 prop-types 代码如下：

1
2
3
4
import PropTypes from 'prop-types'
Goods.defaultProps={
    'title':'Titele'
}

Goods是组件名 title是默认值名称 Title是默认值

也可以校验传值的类型 代码如下：

1
2
3
4
import PropTypes from 'prop-types'
Goods.propTypes = {
    'title':PropTypes.string.isRequired
}

PropTypes.string是检查是否为字符串

其他的是：

检查值是否为数组
PropTypes.array
检查值是否为布尔类型
PropTypes.bool
检查值是否为函数
PropTypes.func
检查值是否为数字
PropTypes.number
检查值是否为对象
PropTypes.object
检查值是否为Symbol类型
PropTypes.symbol

二、子组件传递父组件

通过this.props.名称（值）传给父组件，父组件在子组件标签中定义方法接收修改渲染的this.state值；代码如下：

子组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import React, { Component } from 'react'
import PropTypes from 'prop-types'
 
class Goods extends Component {
    constructor(props){
        super()
    }
    // 点击事件触发此方法
    zcf=()=>{
        this.props.fn1('传过来了')
    }
    render() {
        return (
            <div>
                <h1>{this.props.txt}</h1>
                {/* 按钮 通过点击事件传值 */}
                <input type='button' value='传' onClick={this.zcf}></input>
            </div>
        )
    }
}

父组件代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Goods from '../Good/Goods'
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      mess: '123' //初始化mess属性
      }
  }
    // 接收子组件传递的值 修改state状态值
  shou = (msg)=>{
    this.setState({mess: msg});
  }
  render() {
    return (
      <div>
          <h1>{this.state.mess}</h1>
            {/* fn1为子组件传过来的值 txt为传给子组件的值 */}
          <Goods fn1={this.shou} txt={this.state.mess}></Goods>
          
      </div>
    )
  }
}