Javascript 通过样式化组件中的道具进行映射
如中所述,可以大大简化在Javascript 通过样式化组件中的道具进行映射,javascript,reactjs,styled-components,Javascript,Reactjs,Styled Components,如中所述,可以大大简化在样式化组件中检查道具所需的代码量。例如,比较以下代码: ${props => Object.keys(props) .filter(key => colors[key]) .map(color => `color: ${colors[color]};`) .join(' ')} 为此: ${props => props.white && `color: ${colors.whi
样式化组件中检查道具所需的代码量。例如,比较以下代码:
${props =>
Object.keys(props)
.filter(key => colors[key])
.map(color => `color: ${colors[color]};`)
.join(' ')}
为此:
${props => props.white && `color: ${colors.white}`}
${props => props.light && `color: ${colors.light}`}
${props => props.grey && `color: ${colors.grey.base}`}
${props => props.dark && `color: ${colors.dark}`}
${props => props.black && `color: ${colors.black}`}
${props => props.info && `color: ${colors.info}`}
${props => props.success && `color: ${colors.success}`}
${props => props.warning && `color: ${colors.warning}`}
${props => props.error && `color: ${colors.error}`}
${props => props.link && `color: ${colors.link.base}`}
第一行代码比第二行代码要枯燥得多
然而,还有一些我想简化代码的用例,我不知道如何去做
例如,考虑下面的代码:
${props => props.small === 'white' && `@media(min-width: 600px) {color: ${colors.white};}`}
${props => props.small === 'light' && `@media(min-width: 600px) {color: ${colors.light};}`}
${props => props.small === 'grey' && `@media(min-width: 600px) {color: ${colors.grey.base};}`}
${props => props.small === 'dark' && `@media(min-width: 600px) {color: ${colors.dark};}`}
${props => props.small === 'black' && `@media(min-width: 600px) {color: ${colors.black};}`}
${props => props.small === 'info' && `@media(min-width: 600px) {color: ${colors.info};}`}
${props => props.small === 'success' && `@media(min-width: 600px) {color: ${colors.success};}`}
${props => props.small === 'warning' && `@media(min-width: 600px) {color: ${colors.warning};}`}
${props => props.small === 'error' && `@media(min-width: 600px) {color: ${colors.error};}`}
${props => props.small === 'link' && `@media(min-width: 600px) {color: ${colors.link.base};}`}
这与我以前的情况非常相似,只是现在我有一个名为small
的道具名称,它采用特定的值。但是,由于正确的名称带有一个值,因此我不能使用上面提到的Object.keys
解决方案
我想知道的是如何将上述代码简化为一个简单的javascript语句——类似于上面提到的第一行代码
有什么想法吗?这一个非常简单,您可以检查props.small
是否是colors
的属性,如果是,只需返回值colors[props.small]
${props => colors[props.small] && `@media(min-width: 600px) {color: ${colors[props.small]};}`}