将样式化组件作为道具传递给反应
Pass a Styled Component as a prop in react
我的所有样式都使用样式化组件,我想知道如何将样式从我的父组件 footer.jsx 传递到我的可重用子组件联系人作为道具。
我尝试了几种不同的方法,将字符串作为道具传递,然后将其传递到样式化的组件中以更新 background-image{this.props.icon}
但这不起作用,我目前的方法我试过也没有渲染任何东西。
https://www.webpackbin.com/bins/-Kg0-scl1gRf4UTOaK-Y
Footer.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>
)
}
}
在 wbpackbin 中都是正确的,您只需要将 display: block
添加到您的 span 中。在您的变体中,您有两个 height: 0
的跨度。
查看屏幕截图 http://prntscr.com/enzkiw
我的所有样式都使用样式化组件,我想知道如何将样式从我的父组件 footer.jsx 传递到我的可重用子组件联系人作为道具。
我尝试了几种不同的方法,将字符串作为道具传递,然后将其传递到样式化的组件中以更新 background-image{this.props.icon}
但这不起作用,我目前的方法我试过也没有渲染任何东西。
https://www.webpackbin.com/bins/-Kg0-scl1gRf4UTOaK-Y
Footer.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>
)
}
}
在 wbpackbin 中都是正确的,您只需要将 display: block
添加到您的 span 中。在您的变体中,您有两个 height: 0
的跨度。
查看屏幕截图 http://prntscr.com/enzkiw