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 相关文章推荐
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
javascript使用location.search的示例
Nov 05 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
Apr 15 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
javascript函数特点实例分析
May 14 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
Angular2 父子组件通信方式的示例
Jan 29 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 Javascript
如何基于viewport vm适配移动端页面
Nov 13 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 输出简单动态WAP页面
2009/06/09 PHP
学习php设计模式 php实现命令模式(command)
2015/12/08 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP实现计算器小功能
2020/08/28 PHP
关于js datetime的那点事
2011/11/15 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
js实现发送验证码后的倒计时功能
2015/05/28 Javascript
Vuejs第十二篇之动态组件全面解析
2016/09/09 Javascript
jQuery实现选项卡功能(两种方法)
2017/03/08 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
新手简单了解vue
2019/05/29 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
python实现二叉树的遍历
2017/12/11 Python
Python对List中的元素排序的方法
2018/04/01 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
Melijoe美国官网:法国奢侈童装购物网站
2017/04/19 全球购物
linux面试题参考答案(4)
2013/01/28 面试题
应届生体育教师自荐信
2013/10/03 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2016年情人节广告语
2016/01/28 职场文书
Python编解码问题及文本文件处理方法详解
2021/06/20 Python
Python 实现Mac 屏幕截图详解
2021/10/05 Python