学习React[二]

目录

React的组件间的通信

1.父传子-类组件

2.父传子-函数式组件

3.父传子-属性验证

4.子传父

---

React的组件间的通信

1.父传子-类组件

import React, { PureComponent } from 'react'

// 父组件
export default class App extends PureComponent {

  render() {
    return (
       <div>
        <h2>app</h2>
        <ChildCpn name='czm' age='18' />
      </div>
    )
  }
}

// 子组件
class ChildCpn extends PureComponent {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <h2>类 子组件展示父组件传递的数据: 姓名：{this.props.name} 年龄: {this.props.age}</h2>
    )
  }
}

2.父传子-函数式组件

import React, { PureComponent } from 'react'


// 父组件
export default class App extends PureComponent {

  render() {
​    return (
      <div>
​        <h2>app</h2>
​        <ChildCpn name='czm'  age='18'/>
​      </div>
​    )
  }
}

// 子组件
function ChildCpn(props) {

  return (
​    <h2>函数 子组件展示父组件传递的数据: 姓名：{props.name} 年龄: {props.age}</h2>
  )
}

3.父传子-属性验证

import React, { PureComponent } from 'react'

// 导入属性验证 prop-types
import PropTypes from 'prop-types';

export default class App extends PureComponent {

  render() {
​    return (
       <div>

​        <ChildCpn name='czm' age={18} arr={['abc', 'cba']}/>

​        <ChildCpn name='qad' age='18' arr={['q点点', 'e点点']}/>

​        <ChildCpn/>

​      </div>
​    )
  }
}

// 希望有个 ChildCpn默认值

ChildCpn.defaultProps = {

  name: '00',

  age: '000',

  arr: ['0000']

}

// 判断父组件传过来的属性 是否是我们要的类型

ChildCpn.propTypes = {

  name: PropTypes.string.isRequired,

  age: PropTypes.number,

  arr: PropTypes.array,

}

function ChildCpn(props) {
  return (
     <div>
​      <h2>函数 子组件展示父组件传递的数据: 姓名：{props.name} 年龄: {props.age}</h2>
​      <ul>
​        {
​            props.arr.map((item, index) => {
​            return <li key={item}>{item}</li>
​          })
​        }
​      </ul>
​    </div>
  )
}

4.子传父

import React, { PureComponent } from 'react'


// 子组件
class ChildCpn extends PureComponent {

  constructor(props) {
​    super(props);

​    this.state = {

​      mes: "子组件数据"

​    }
  }

  render() {
​    return (
      <div>

​        <h2>子组件</h2>

		// 在子组件 中添加点击事件，把子组件的数据通过点击事件传给父组件 传递给子组件的函数 content
​        <button onClick={e => this.trans(this.state.mes)}>把子组件数据传给父组件</button>

​      </div>
​    )
  }


   trans(val) {

	// 父组件 传递给子组件的函数 content
​    this.props.content(val);
  }
}


export default class App extends PureComponent {

  constructor(props) {
​    super(props);

​    this.state = {

​      message: "父组件数据"

​    }
  }

  render() {
​    return (
      <div>

​        <h2>{this.state.message}</h2>

		// 父组件传递给子组件 函数，这个函数执行传递过来的数据
​        <ChildCpn content={(val) => this.getValue(val)} />

​      </div>
​    )
  }

  getValue(val) {

​    this.setState({

​      message: val

​    })
  }
}