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 相关文章推荐
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
javascript中[]和{}对象使用介绍
Mar 20 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
Nov 30 Javascript
vue如何获取点击事件源的方法
Aug 10 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
May 07 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
使用 JavaScript 制作页面效果
Apr 21 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
IIS下PHP的三种配置方式对比
2014/11/20 PHP
php绘制一条弧线的方法
2015/01/24 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Json_decode 解析json字符串为NULL的解决方法(必看)
2017/02/17 PHP
php读取出一个文件夹及其子文件夹下所有文件的方法示例
2017/06/15 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
javascript 必知必会之closure
2009/09/21 Javascript
多选列表框动态添加,移动,删除,全选等操作的简单实例
2014/01/13 Javascript
javascript父子页面通讯实例详解
2015/07/17 Javascript
EasyUI创建对话框的两种方式
2016/08/23 Javascript
H5移动端图片压缩上传开发流程
2016/11/09 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
JavaScript定义函数_动力节点Java学院整理
2017/06/27 Javascript
基于vue.js实现的分页
2018/03/13 Javascript
微信小程序修改swiper默认指示器样式的实例代码
2018/07/18 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
vue-cli3 karma单元测试的实现
2019/01/18 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
简明 Python 基础学习教程
2007/02/08 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python库安装速度过慢解决方案
2020/07/14 Python
澳大利亚Rockwear官网:女子瑜伽、健身和运动服
2021/01/26 全球购物
初中高效课堂实施方案
2014/02/26 职场文书
保险经纪人求职信
2014/03/11 职场文书
先进工作者个人总结
2015/02/15 职场文书
雷锋观后感
2015/06/10 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
python基础之类方法和静态方法
2021/10/24 Python