react组件

父子组件通信

父组件通过把值绑定到子组件的属性上传给子组件，子组件通过this.props获取值。
子组件不能直接修改父组件传来的值，所以需在父组件写好方法，将方法一同传给子组件,然后子组件调用父组件方法

父子组件

// 父组件
import React, {Component} from 'react'
import XiaojiejieItem from './XiaojiejieItem'
class Xiaojiejie extends Component{
  constructor (props) {
    super(props)
    this.state = { inputValue: '基本服务', list: ['基础按摩', '精油'] }
  }
  render(){
    return  (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
          <button onClick={this.addList.bind(this)}> 增加服务 </button>
        </div>
        <ul>
          {
            this.state.list.map((item,index)=>{
                return <XiaojiejieItem
                  key={index}
                  content={item}
                  index={index}
                  deleteItem={this.deleteItem.bind(this)}
                /> {/*通过属性传值，子组件通过this.props获取*/}
            })
          }
        </ul>  
      </Fragment>
    )
  }
  inputChange (e) {
    this.setState({
      inputValue: e.target.value
    })
  }
  addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })
  }
  deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    })
  }
}
export default Xiaojiejie

// 子组件
import React, { Component } from 'react'
class XiaojiejieItem  extends Component {
  render() { 
    return ( 
      <li onClick={this.handleClick.bind(this)}>{this.props.content}</li>
    )
  }
  handleClick () {
    this.props.deleteItem(this.props.index) // 子组件调用父组件方法，删除服务
  }
}
export default XiaojiejieItem

校验props

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

class XiaojiejieItem extends Component {
  ...
  ...
}

XiaojiejieItem.propTypes={ // 注意：不是写在类里面，是写在下面
  content:PropTypes.string, // 字符串
  deleteItem:PropTypes.func, // 函数
  index:PropTypes.number,
  name:PropTypes.string.isRequired, // name是字符串且是必传
}

XiaojiejieItem.defaultProps = { // 默认值
    content:'Ethan'
}

export default XiaojiejieItem

参考教程

技术胖教程