React styled-components设置组件属性的方法


Posted in Javascript onAugust 07, 2018

问题

最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-components了。

回到项目开发中,一个音乐播放器应该由多个组件组成,其中有一个list组件用于展示歌曲列表,就像这样

React styled-components设置组件属性的方法 

鹅。。。好像暴露了我的喜好。。。

每一列就是一个div(当然ul也是可以的),为了方便后续功能的实现,我把每首歌的海报、音频文件的地址当做div的属性储存起来。list组件的代码如下

import React from 'react';
import styled from 'styled-components';

// 设置样式
const ContentDiv = styled.div`
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  transition: 0.5s;
  cursor: pointer;
  &:hover{
    color: #31c27c;
  }
`;

const LengthDiv = styled.div`
  color: #999;
`;

// list组件
class List extends React.Component {
  constructor(props){
   super(props);
   this.state = {
    // 播放列表
    list: this.props.list
   };
  }

  render(){
    const listItem = this.state.list.map((item, index) => {
      return (
        <ContentDiv key={ item.name } poster={ item.poster } audio={ item.music }>
          <div>
            { item.name } - { item.author }
          </div>
          <LengthDiv>
            { item.length }
          </LengthDiv>
        </ContentDiv>
      );
    });

    return (
      <div>
        { listItem }
      </div>
    )
  }
}

export default List;

代码很简单,但最后我们会发现这样一个问题——在页面中生成的div元素只有poster属性而没有audio属性

React styled-components设置组件属性的方法 

打开react developer tools查看

React styled-components设置组件属性的方法 

这时可以发现其实并不是styled.div直接编译成原生html元素,而是会生成一个div(当然,如果是styled.button就会额外生成一个子button),最后在页面中显示的就是这个div。
也可以发现在styled.div中两个属性都是设置好的,但在子div中就只有一个属性了,通过反复尝试可以发现,直接在styled-components组件中设置属性,除了className之外就只有一个属性会生效

解决

解决的办法就是多看几遍styled-components文档,我们就会发现styled-components有一个attr方法来支持为组件传入 html 元素的其他属性,那么原来的list组件就只需要修改ContentDiv变量即可

const ContentDiv = styled.div.attrs({
 poster: props => props.poster,
 audio: props => props.audio
})`
  display: flex;
  justify-content: space-between;
  height: 50px;
  line-height: 50px;
  transition: 0.5s;
  cursor: pointer;
  &:hover{
    color: #31c27c;
  }
`;

props对象就是我们传入ContentDiv的属性,这样一来,最后生成的div中poster与audio属性都有。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
Oct 20 Javascript
JavaScript实现简单图片滚动附源码下载
Jun 17 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
基于angular6.0实现的一个组件懒加载功能示例
Apr 12 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
20个最常见的jQuery面试问题及答案
May 23 jQuery
利用Bootstrap Multiselect实现下拉框多选功能
Apr 08 Javascript
es6中比较有用的7个技巧小结
Jul 12 Javascript
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
vue实现简单的登录弹出框
Oct 26 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 #Javascript
详解vue axios用post提交的数据格式
Aug 07 #Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 #Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 #Javascript
echarts实现地图定时切换散点与多图表级联联动详解
Aug 07 #Javascript
详解Nuxt.js部署及踩过的坑
Aug 07 #Javascript
解决vue 中 echart 在子组件中只显示一次的问题
Aug 07 #Javascript
You might like
浅析php工厂模式
2014/11/25 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
Yii2中简单的场景使用介绍
2017/06/02 PHP
PHP 实现文件压缩解压操作的方法
2019/06/14 PHP
phpfpm的作用和用法
2019/10/10 PHP
js 屏蔽鼠标右键脚本附破解方法
2009/12/03 Javascript
jQuery实现单行文字间歇向上滚动源代码
2013/06/02 Javascript
Jquery ajax加载等待执行结束再继续执行下面代码操作
2015/11/24 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
利用js判断手机是否安装某个app的多种方案
2017/02/13 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
如何在基于vue-cli的项目自定义打包环境
2018/11/10 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
nodejs微信开发之授权登录+获取用户信息
2019/03/17 NodeJs
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
python搭建简易服务器分析与实现
2012/12/15 Python
Python中的__new__与__init__魔术方法理解笔记
2014/11/08 Python
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python创建一个空的dataframe,并循环赋值的方法
2018/11/08 Python
详解Python time库的使用
2019/10/10 Python
python导入库的具体方法
2020/06/18 Python
python反编译教程之2048小游戏实例
2021/03/03 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
值类型与引用类型有什么不同?请举例说明?并分别列举几种相应的数据类型
2015/10/24 面试题
人力资源专员岗位职责
2014/01/30 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
房屋委托书范本
2014/04/04 职场文书
2014年售票员工作总结
2014/11/19 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
世界十大评分最高的动漫,CLANNAD上榜,第八赚足人们眼泪
2022/03/18 日漫
我收到了德劲DE1107
2022/04/05 无线电