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 相关文章推荐
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
Feb 19 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
Nov 03 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
Vue 项目代理设置的优化
Apr 17 Javascript
js中的闭包实例展示
Nov 01 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
浅析Vue 防抖与节流的使用
Nov 14 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 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和AJAX创建RSS聚合器的代码
2007/03/13 PHP
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php时间戳格式化显示友好的时间函数分享
2014/10/21 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
jquery 打开窗口返回值实现代码
2010/03/04 Javascript
jQuery中Ajax的get、post等方法详解
2015/01/20 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
JavaScript实现单例模式实例分享
2017/12/22 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
Net微信网页开发 使用微信JS-SDK获取当前地理位置过程详解
2019/08/26 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
python发布模块的步骤分享
2014/02/21 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python3调用windows dos命令的例子
2019/08/14 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
跟单文员的岗位职责
2013/11/14 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
协议书模板
2014/04/23 职场文书
听课评语大全
2014/04/30 职场文书
学校运动会广播稿
2014/10/11 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Java版 单机五子棋
2022/05/04 Java/Android