react 组件通信 + className的三目运算

1.父组件向子组件传递数据

//父组件.js
  let fatherData = [1,2,3,4]
  <childComponent  toChildData={ fatherData }>


//子组件childComponent.js  取到数据
  data = this.props.toChildData

2.className 的三目运算

<div className = { nowIndex === i ? 'active' : '' }

3.子组件向父组件通信需要使用父组件传递给子组件的事件

//子组件 childComponent.js
toEmitFather( paramsFromChild ){
    this.props.fatherPickChildEvt ( paramsFromChild  )   //调用父组件通过属性传递过来的fatherPickChildEvt 事件
}
<li onClick = {this.toEmitFather.bind(this, paramsFromChild )}><li/>  //如果需要传递参数给父组件用bind()


//父组件.js
childClick = ( paramsFromChild ) =>{    //!注意 这里一定要使用箭头函数, 不然this指向的不是父组件的实例而是childComponent实例
    this.setState({})
}
<childComponent fatherPickChildEvt = {this.childClick}>