用于设置组件属性的反应式组件方法

问题

最近，我试着用react做一个音乐播放器，但是我以前不知道风格组件。然而，由于在js中使用css并试图实现悬停效果，百度在各种解决方案后找到了样式化组件。如果你读了这篇博客，它证明你应该知道或者熟练地使用样式化组件。

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

鹅。这似乎暴露了我的品味。

每一列都是一个div(当然ul也是可以的)。为了方便后续功能的实现，我把海报的地址和每首歌的音频文件存储为div的属性。列表组件的代码如下

从“React”导入React；从“样式组件”导入样式；//设置style const content div=style . div ` display : flex；justice-content :空格；高度： 50px；线高： 50px；transition: 0.5scursor:指针；hover { color: # 31c27c}`;const length div=style . div ` color : # 999；`;//list组件类list扩展了reach.component { constructor(props){ super(props)；This.state={//播放列表列表： this . props . list }；} render(){ const listItem=this . state . list . map((item，index)={ return (ContentDiv键={ item.name }海报={ item .海报}音频={ item . music } div { item . name }-{ item . author }/div length div { item . length }/length div/content div)；});return(div { listItem }/div)} }导出默认列表；代码很简单，但是最后我们会发现这样一个问题，页面中生成的div元素只有海报属性，没有音频属性

打开react开发者工具进行查看

这时我们可以发现，styled.div并不是直接编译成原生的html元素，而是会生成一个div(当然如果是styled.button，会生成一个额外的子按钮)，这个div最后会显示在页面中。还可以发现，这两个属性都是在styled.div中设置的，但是在sub div中只有一个属性。通过反复尝试可以发现，如果在style-components组件中直接设置属性，那么除了className之外，只有一个属性会生效。

解决

解决方法是多次阅读styled-components文档，我们会发现styled-components有一个attr方法来支持传递组件的html元素的其他属性，所以原始的list组件只需要修改ContentDiv变量

const content div=style . div . attrs({ poster : props=props . poster，audio : props=props . audio })` display : flex；justice-content :空格；高度： 50px；线高： 50px；transition: 0.5scursor:指针；hover { color: # 31c27c}`;道具对象是我们传递到Contentdiv中的属性，因此生成的div中的海报和音频属性都有。

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