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

问题

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

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

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

每一列就是一个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 developer tools查看

这时可以发现其实并不是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属性都有。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • React Component存在的几种形式详解

    React Component存在的几种形式详解

    前言 最近项目基本都是用 React,今天总结分享 React Component 常见的几种形式,如果你在写 React 时经常不知道怎么拆分代码,这篇文章或许对你有所帮助. React.Component是一个抽象基类.这意味着直接引用React.Component是毫无意义的.你可以实现一个它的子类,并且至少定义一个render()方法即可使用. 为了更充分理解 React,先搞懂平时写的 JSX 是什么.初学的时候有比较大困惑,这是一门新语言吗?大部分人是匆匆扫过文档就开始开发.通过 b

  • React 无状态组件(Stateless Component) 与高阶组件

    无状态组件(Stateless Component) 是 React 0.14 之后推出的,大大增强了编写 React 组件的方便性,也提升了整体的渲染性能. 无状态组件 (Stateless Component) function HelloComponent(props, /* context */) { return <div>Hello {props.name}</div> } ReactDOM.render(<HelloComponent name="Se

  • React之PureComponent的使用作用

    React避免重复渲染 React在渲染出的UI内部建立和维护了一个内层的实现方式,它包括了从组件返回的React元素.这种实现方式使得React避免了一些不必要的创建和关联DOM节点,因为这样做可能比直接操作JavaScript对象更慢一些,它被称之为"虚拟DOM". 当一个组件的props或者state改变时,React通过比较新返回的元素和之前渲染的元素来决定是否有必要更新实际的DOM.当他们不相等时,React会更新DOM. 在一些情况下,你的组件可以通过重写这个生命周期函数s

  • 详解在React.js中使用PureComponent的重要性和使用方式

    详解在React.js中使用PureComponent的重要性和使用方式

    一.介绍PureComponent React 15.3在2016.06.29发布了,这个版本最值得关注的是支持了 React.PureComponent ,它取代了之前的 pure-render-mixin .在本文中,我们将讨论 PureComponent 的重要性和使用场景. React.PureComponent最重要的一个用处就是优化React应用,这很容易快速地实现.使用 React.PureComponent 对性能的提升是非常可观的,因为它减少了应用中的渲染次数. PureCom

  • React styled components样式组件化使用流程

    目录 安装 基本使用 props传值修改样式 样式化组件 样式扩展 动画 将style样式写在同一个文件中并且组件化使用. 安装 npm i styled-components 基本使用 const 样式组件名=引入的styled-components.替代的标签(支持sass写法) 再使用样式组件名将标签包裹起来即可 import React, { Component } from 'react'; import styled from 'styled-components'; class A

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

    问题 最近在试着用react做一个音乐播放器,在这之前其实并不了解styled-components,但由于使用css in js并且想实现hover效果,百度各种解决方案后发现了styled-components这个好东西,如果你看到了这篇博客,就证明你应该了解或者熟练运用styled-components了. 回到项目开发中,一个音乐播放器应该由多个组件组成,其中有一个list组件用于展示歌曲列表,就像这样 鹅...好像暴露了我的喜好... 每一列就是一个div(当然ul也是可以的),为了方

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • MSScriptControl.ScriptControl组件属性、方法、事件介绍

    MSScriptControl.ScriptControl组件实例对象属性 属性名称 类型 备注 AllowUI BOOL 检测是否允许运行用户的接口元素.如果为False,则诸如消息框之类的界面元素不可见. CodeObject Object 脚本暴露给宿主调用的对象.只读. Modules Modules 宿主提供给脚本的组件库模块.只读.(COM组件通常都是以对象收集的形式向用户提供可以留给用户二次开发的对象集合,每一个收集即一个Modules) Language String 设置或获取

  • React实践之Tree组件的使用方法

    React实践之Tree组件的使用方法

    本文介绍了React实践之Tree组件,分享给大家,具体如下: 实现功能 渲染数据 展开合并 使用 数据结构: const node = { title: '00000', key: '0' , level:'level1', open: true, child:[ { title: '0-111111', key: '0-0', level:'level2', open: true, child:[ { title: '0-1-1111', key: '0-0-0', level:'level

  • React日期时间显示组件的封装方法

    React日期时间显示组件的封装方法

    本文实例为大家分享了React日期时间显示组件的封装具体代码,供大家参考,具体内容如下 时间日期展示器 import ProtoType from 'prop-types'; import { useState, useEffect } from 'react'; import './index.css' /**时间选择器  * @luoronghao  * 参数说明  * timzone:时区(1-24)  * calendar:日期类型{solar(阳历),lunar(阴历)}  * dat

  • React数据传递之组件内部通信的方法

    1. 概述 脱离初级前端一段时间后会发现,写样式的时间越来越少,处理数据的时间越来越多.处理数据的过程也就是实现业务逻辑的过程,这在项目中无疑是最重要的. 所以学习前端框架,了解完基本语法后,接下来就要学习其如何进行数据传递. Angular 设计之初的一大亮点就是实现了数据的双向绑定,使用 Vue 一段时间后发现,所谓数据的双向绑定,组件内部唯一的应用场景就是 form 表单(input,textarea,select, radio),而这种场景下的数据双向绑定,即便框架内部没有实现,自己实现

  • React项目动态设置title标题的方法示例

    在React搭建的SPA项目中页面的title是直接写在入口index.html中,当路由在切换不用页面时,title是不会动态变化的.那么怎么让title随着路由的切换动态变化呢? 1.在定义路由时增加title属性. { path: "/regularinvestment", component: Loadable({ loader: () => import('./../../business/Regularinvestment/index'), loading: Page

  • jQuery获取选中内容及设置元素属性的方法

    获取选中select : $("#id option:selected").val(); 自定义radio: $("input[name=sex][value="+data.sex+"]").attr("checked",true); 获取radio: $("input[name='sex']:checked").val() 设置input不能编辑: $("#cashNum").attr

随机推荐