這篇文章給大家介紹怎么在React中設(shè)置 styled-components組件屬性，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

成都創(chuàng)新互聯(lián)擁有十多年成都網(wǎng)站建設(shè)工作經(jīng)驗,為各大企業(yè)提供成都做網(wǎng)站、網(wǎng)站設(shè)計服務(wù)，對于網(wǎng)頁設(shè)計、PC網(wǎng)站建設(shè)（電腦版網(wǎng)站建設(shè)）、成都APP應(yīng)用開發(fā)、wap網(wǎng)站建設(shè)（手機版網(wǎng)站建設(shè)）、程序開發(fā)、網(wǎng)站優(yōu)化（SEO優(yōu)化）、微網(wǎng)站、空間域名等，憑借多年來在互聯(lián)網(wǎng)的打拼，我們在互聯(lián)網(wǎng)網(wǎng)站建設(shè)行業(yè)積累了很多網(wǎng)站制作、網(wǎng)站設(shè)計、網(wǎng)絡(luò)營銷經(jīng)驗，集策劃、開發(fā)、設(shè)計、營銷、管理等網(wǎng)站化運作于一體，具備承接各種規(guī)模類型的網(wǎng)站建設(shè)項目的能力。

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 (
        
          

            { item.name } - { item.author }
          
          
            { item.length }
          
        
      );
    });

    return (
      

        { listItem }
      
    )
  }
}

export default List;

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

打開react developer tools查看

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

解決

解決的辦法就是多看幾遍styled-components文檔，我們就會發(fā)現(xiàn)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;
  }
`;

關(guān)于怎么在React中設(shè)置 styled-components組件屬性就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。