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}>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,508评论 1 33
  • 在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子...
    柏丘君阅读 93,222评论 7 80
  • 组件(Component)是Vue.js最核心的功能,也是整个架构设计最精彩的地方,当然也是最难掌握的。...
    六个周阅读 5,638评论 0 32
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,376评论 0 3
  • 2018年9月26日,秋高气爽,我们新东街学校的全体语文老师来到了学府街小学参加语文教研活动,大家对这场教研会充满...
    我爱悠然阅读 685评论 0 1