react-组件之间的传值和参数校验

有如下2个组件

import React, { Component } from 'react'

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <span>hello,world!</span>
      </div>
    )
  }
}

import React, { Component } from 'react'
import MyConponent from '../components/MyComponent'
export default class MyPage extends Component {
  render() {
    return (
      <div>
        <MyConponent />
      </div>
    )
  }
}

import React, { Component } from 'react'
import MyConponent from '../components/MyComponent'
export default class MyPage extends Component {
  render() {
    return (
      <div>
        <MyConponent myPageValue="我是MyPage组件的值" />
      </div>
    )
  }
}

import React, { Component } from 'react'

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <span>hello,world!</span>
        <p>{this.props.myPageValue}</p>
      </div>
    )
  }
}

1.png

<MyConponent myPageValue="我是MyPage组件的值" /> this.props

import React, { Component } from 'react'

export default class MyComponent extends Component {
  render() {
    return (
      <div>
        <span>hello,world!</span>
        <p>{this.props.myPageValue}</p>
        <button onClick={() => this.props.update('我修改了父组件value')}>
          修改
        </button>
      </div>
    )
  }
}

注意一下 this.updataMyPageValue.bind(this) 绑定父组件的this指针不然子组件调用之后this就不是父组件了就无法修改父组件的satate了

import React, { Component } from 'react'
import MyConponent from '../components/MyComponent'
export default class MyPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      value: '未改变'
    }
  }
  render() {
    return (
      <div>
        <MyConponent
          update={this.updataMyPageValue.bind(this)}
          myPageValue="我是MyPage组件的值"
        />
        <p>{this.state.value}</p>
      </div>
    )
  }
  updataMyPageValue(value) {
    this.setState({
      value
    })
  }
}

1.png

1.png

npm install prop-types 先安装参数校验包

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default class MyComponent extends Component {
  static propTypes = {
    myPageValue: PropTypes.string.isRequired,
    update: PropTypes.func.isRequired
  }
  render() {
    return (
      <div>
        <span>hello,world!</span>
        <p>{this.props.myPageValue}</p>
        <button onClick={() => this.props.update('我修改了父组件value')}>
          修改
        </button>
      </div>
    )
  }
}

 static propTypes = {
    myPageValue: PropTypes.string.isRequired,
    update: PropTypes.func.isRequired
  }

myPageValue:PropTypes.string.isRequired 必须是字符串并且是必须的
update: PropTypes.func.isRequired 必须是方法并且是必须的

更详细的规则请点击查看

我把MyPage改成如下

 <MyConponent
          update={this.updataMyPageValue.bind(this)}
          myPageValue={1/**传入一个数字 */} 
        />

1.png
虽然能执行但是控制台会报一个警告