react组件通信

父子组件

父组件

export default class PLP extends Component<any, any> {
  addCart = (id: any) => {
    console.log('父组件接收子组件事件', id)
  }
  render () {
    const { productList } = this.state;
    return (
      <div>
        <ul>
          { productList.map((item: any, index: number) =>{
            return <li key={index}>
              <Product detail={item} addCart={this.addCart.bind(this)}></Product>
            </li>
          }) }
        </ul>
      </div>
    )
  }
}

子组件

export default class Product extends Component<any, any> {
  constructor(props: any) {
    super(props)
    this.state = {}
  }
  addCart = (id: any) => {
    console.log('子组件调用父组件', id)
    this.props.addCart(id)
  }
  render () {
    const { detail } = this.props;
    return (
      <div>
        <Link to={{pathname: '/pdp', state: { id: detail.id}}}>{detail.title}</Link>
        <button onClick={this.addCart.bind(this, detail.id)}>加购</button>
      </div>
    )
  }
}