将样式化组件作为道具传递给反应答案

【问题标题】：Pass a Styled Component as a prop in react将样式化组件作为道具传递给反应
【发布时间】：2017-08-17 15:19:10
【问题描述】：

我的所有样式都使用 styled-components，并且想知道如何将样式从我的父组件 footer.jsx 传递到我的可重用子组件联系人作为道具。

我尝试了几种不同的方法，将字符串作为道具传递，然后将其传递到联系人的样式组件中以更新background-image{this.props.icon}，但这不起作用，我尝试过的当前方法也不起作用'也不渲染任何东西。

https://www.webpackbin.com/bins/-Kg0-scl1gRf4UTOaK-Y

页脚.jsx

import React from 'react'
import styled from 'styled-components'
import Contact from '../../molecules/Contact'

const Icon1 = styled.span`
  margin-top:8.333333px;
  background:url(icon1.png);
  width:25px; 
  height:25px;
  `
const Icon2 = styled.span`
  margin-top:8.333333px;
  background:url(icon2.png);
  width:25px; 
  height:25px;
  `
export default class MainFooter extends React.Component { 
  render() {
    return (
      <Wrapper>
         <Contact icon={<Icon1 />} />
         <Contact icon={<Icon2 />} />
      </Wrapper>
    )
   }
  }

contact.jsx

export default class Contact extends React.Component {
 return (
  <A href="/">
    <Wrapper>
      <ColLeft> {this.props.icon}</ColLeft>
    </Wrapper>
  </A>
  )
}

}

【问题讨论】：

为了提高您获得好答案的机会，请使用 Stack Snippets（[<>] 工具栏按钮）将您的问题更新为 runnable minimal reproducible example。 Stack Snippets 支持 React，包括 JSX、加载外部库（通过 CDN）等； here's how to do one.

标签： javascript reactjs styled-components

【解决方案1】：

在 wbpackbin 中一切正确，您只需将 display: block 添加到您的跨度。在您的变体中，您有两个带有height: 0 的跨度。见截图http://prntscr.com/enzkiw

【讨论】：