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 相关文章推荐
InnerHtml和InnerText的区别分析
Mar 13 Javascript
IE DOM实现存在的部分问题及解决方法
Jul 25 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
手机号码,密码正则验证
Sep 04 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
Jun 03 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
微信小程序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/08/27 PHP
解析php DOMElement 操作xml 文档的实现代码
2013/05/10 PHP
如何用php生成扭曲及旋转的验证码图片
2013/06/07 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
js支持键盘控制的左右切换立体式图片轮播效果代码分享
2015/08/26 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
bootstrap中模态框、模态框的属性实例详解
2017/02/17 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
[01:01:14]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第一场 11.21
2020/11/23 DOTA
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
用Python分析3天破10亿的《我不是药神》到底神在哪?
2018/07/12 Python
VPS CENTOS 上配置python,mysql,nginx,uwsgi,django的方法详解
2019/07/01 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
python爬虫多次请求超时的几种重试方法(6种)
2020/12/01 Python
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
办公室主任先进事迹
2014/01/18 职场文书
护理学应聘自荐书范文
2014/02/05 职场文书
《月光启蒙》教学反思
2014/03/01 职场文书
计算机网络专业求职信
2014/06/05 职场文书
安全责任书怎么写
2014/07/28 职场文书
政协调研汇报材料
2014/08/15 职场文书
协会周年庆活动方案
2014/08/26 职场文书
户籍证明书标准模板
2014/09/10 职场文书
现役军人家属慰问信
2015/03/24 职场文书
工程质检员岗位职责
2015/04/08 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
MySQL中的隐藏列的具体查看
2021/09/04 MySQL
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技