快捷導(dǎo)航

React styled-components設(shè)置組件屬性的方法

更新時(shí)間：2018年08月07日 11:46:52 作者：wopelo

這篇文章主要介紹了styled-components設(shè)置組件屬性的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題

最近在試著用react做一個(gè)音樂(lè)播放器，在這之前其實(shí)并不了解styled-components，但由于使用css in js并且想實(shí)現(xiàn)hover效果，百度各種解決方案后發(fā)現(xiàn)了styled-components這個(gè)好東西，如果你看到了這篇博客，就證明你應(yīng)該了解或者熟練運(yùn)用styled-components了。

回到項(xiàng)目開(kāi)發(fā)中，一個(gè)音樂(lè)播放器應(yīng)該由多個(gè)組件組成，其中有一個(gè)list組件用于展示歌曲列表，就像這樣

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

每一列就是一個(gè)div（當(dāng)然ul也是可以的），為了方便后續(xù)功能的實(shí)現(xiàn)，我把每首歌的海報(bào)、音頻文件的地址當(dāng)做div的屬性?xún)?chǔ)存起來(lái)。list組件的代碼如下

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

// 設(shè)置樣式
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;

代碼很簡(jiǎn)單，但最后我們會(huì)發(fā)現(xiàn)這樣一個(gè)問(wèn)題——在頁(yè)面中生成的div元素只有poster屬性而沒(méi)有audio屬性

打開(kāi)react developer tools查看

這時(shí)可以發(fā)現(xiàn)其實(shí)并不是styled.div直接編譯成原生html元素，而是會(huì)生成一個(gè)div（當(dāng)然，如果是styled.button就會(huì)額外生成一個(gè)子button），最后在頁(yè)面中顯示的就是這個(gè)div。
也可以發(fā)現(xiàn)在styled.div中兩個(gè)屬性都是設(shè)置好的，但在子div中就只有一個(gè)屬性了，通過(guò)反復(fù)嘗試可以發(fā)現(xiàn)，直接在styled-components組件中設(shè)置屬性，除了className之外就只有一個(gè)屬性會(huì)生效

解決

解決的辦法就是多看幾遍styled-components文檔，我們就會(huì)發(fā)現(xiàn)styled-components有一個(gè)attr方法來(lái)支持為組件傳入 html 元素的其他屬性，那么原來(lái)的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對(duì)象就是我們傳入ContentDiv的屬性，這樣一來(lái)，最后生成的div中poster與audio屬性都有。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: