React通过父组件传递类名给子组件的实现方法


Posted in Javascript onNovember 13, 2017

React 教程

React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。
React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React 特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。
2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。
3.灵活 −React可以与已知的库或框架很好地配合。
4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。
5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

1.通过父组件传递类名给子组件的方法  (第十九行)

2.通过不同的状态值,应用某些类名     (第22行)

import React from 'react'
import './style.css'
class PageTitle extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      timeType:0
    }
  }
  handleClick(timeType){
    this.setState({
      timeType:timeType
    });
    this.props.handle(timeType+1);
  }
  render() {
    const {title,dataList} = this.props;
    return (
     <h3 className={this.props.clasName+" cp_title"}>{title}
       <div className="floatR">
         {dataList.map((item,index) => {
           return <span key={index} onClick={this.handleClick.bind(this,index)} className={this.state.timeType === index ? "canvasNav canvasNavActive": "canvasNav"}>{item}</span>
         })}
       </div>
     </h3>
    )
  }
}
export default PageTitle;

总结

以上所述是小编给大家介绍的React通过父组件传递类名给子组件的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
关于Javascript作用域链的八点总结
Dec 06 Javascript
javascript实现鼠标拖动改变层大小的方法
Apr 30 Javascript
jQuery移动端图片上传组件
Jun 12 Javascript
JavaScript遍历求解数独问题的主要思路小结
Jun 12 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
原生JS与jQuery编写简单选项卡
Oct 30 jQuery
详解mpvue中小程序自定义导航组件开发指南
Feb 11 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
基于vue写一个全局Message组件的实现
Aug 15 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
js设置随机切换背景图片的简单实例
Nov 12 #Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 #Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 #jQuery
You might like
php模板之Phpbean的目录结构
2008/01/10 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP大文件分割上传 PHP分片上传
2017/08/28 PHP
查找iframe里元素的方法可传参
2013/09/11 Javascript
Function.prototype.bind用法示例
2013/09/16 Javascript
node.js require() 源码解读
2015/12/13 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
详解webpack babel的配置
2018/01/09 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
layui 监听表格复选框选中值的方法
2018/08/15 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
Vue实现图片与文字混输效果
2019/12/04 Javascript
JS实现商品橱窗特效
2020/01/09 Javascript
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
将python图片转为二进制文本的实例
2019/01/24 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
详解HTML5中rel属性的prefetch预加载功能使用
2016/05/06 HTML / CSS
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
项目考察欢迎辞
2014/01/17 职场文书
家庭教育先进个人事迹材料
2014/01/24 职场文书
cf收人广告词
2014/03/14 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
房地产活动策划方案
2014/05/14 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
JS Object构造函数之Object.freeze
2021/04/28 Javascript
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
教你用python控制安卓手机
2021/05/13 Python