React父子组件传值 + 值验证

父组件向子组件传值

• 通过props，将父组件的state传递给了子组件。

子组件向父组件传值

• 父组件将更新数据的方法拿给子组件使用，子组件将自身的数据传入这个方法并调用，以此来改变父组件的数据。

值验证prop-types

• ChildCpn.propTypes = {key：type} 验证值类型
• ChildCpn.defaultProps = {key：type} 设置默认值

import React, {Component} from "react";
import PropTypes from 'prop-types'; // 验证props

/**
 * 演示父子组件传值
 */

// 创建类子组件
class ChildCpn extends Component {
  constructor(props) {
    super(props);       // 相当于 this.props = props
    console.log(props); // {name: "kevin", age: 18, btnClick: ƒ}
  }

  // 通过调用父组件传递的函数来修改数据
  handleClick = () => this.props.fn("我是子组件数据", -1)

  render() {
    const {name, age, fn, btnClick} = this.props
    console.log(fn); // foo(data) {console.log(data);}
    console.log(btnClick);  // e => this.changeAge(1)
    return (
      <div>
        <h2>我是类子组件,下面是来自父组件的传值</h2>
        <p>{"我是" + name + " 年龄 " + age}</p>
        <div>下面通过给父组件传值(自定义函数)改变年龄</div>
        {/* 这里接收到父组件传过来的函数(btnClick), 并绑定到点击事件中 */}
        {/* 一旦点击事件发生,会调用父组件的函数(btnClick) */}
        {/* 相当于onClick={e => this.changeAge(1)} */}
        <button onClick={btnClick}>年龄 + 1</button>
        <button onClick={this.handleClick}>年龄 - 1</button>
        <hr/>
      </div>
    )
  }
}

// 创建函数子组件
function ChildCpn2(props) {
  const {name, age, btnClick} = props
  return (
    <div>
      <h2>我是函数子组件,下面是来自父组件的传值</h2>
      <p>{"我是" + name + " 年龄 " + age}</p>
      <div>下面通过给父组件传值(自定义函数)改变年龄</div>
      <button onClick={btnClick}>年龄 + 1</button>
    </div>
  )
}

// 验证props类型
// propTypes 都为小写
ChildCpn.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
  fn: PropTypes.func
  /**
   更多验证学习地址: https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
   optionalArray: PropTypes.array,
   optionalBool: PropTypes.bool,
   optionalFunc: PropTypes.func,
   optionalNumber: PropTypes.number,
   optionalObject: PropTypes.object,
   optionalString: PropTypes.string,
   optionalSymbol: PropTypes.symbol,
   */
}

ChildCpn2.defaultProps = {
  name: "默认名字",
  age: "保密"
}

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "kevin",
      age: 18
    }
  }

  // 更新年龄
  changeAge(count) {
    this.setState({
      age: this.state.age + count
    })
  }

  foo = (data, counter) => {
    console.log(data, counter);
    this.setState({
      age: this.state.age + counter
    })
  }

  render() {
    return (
      <div>
        <ChildCpn
          name={this.state.name}
          age={this.state.age}
          fn={this.foo} // 传入函数
          // 向子组件传递自定义函数
          btnClick={e => this.changeAge(1)}
        />
        <ChildCpn2
          age={this.state.age}
          btnClick={e => this.changeAge(1)}
        />
      </div>
    )
  }
}