問題
最近在試著用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屬性都有。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
