设置了样式的元件动态标记名称
设置了样式的元件动态标记名称
提问于 2018-08-30 17:21:43
我想做一个动态组件。(动态标签将是一个带有样式的组件-> emotion)
const Dynamic = ({ tag: Tag, children, ...rest }) =>
<Tag {...rest}>
{ children }
</Tag>该组件将是具有样式的组件，如下所示：
const Column = styled(div)({ color: 'red' })
const Row = styled(span)({ color: 'yellow' })这看起来很好，工作正常，BUUUUUT：
当我尝试在另一个DynamicComponent中使用DynamicComponent时：
<DynamicComponent tag={Row}>
{
mapOver.map(item=>
<DynamicComponent tag={Column}/>
)
}
</DynamicComponent>然后，出于某种原因，动态子对象将使用动态父对象的样式。
我是不是漏掉了什么？
附言：
如果我不使用动态样式，而是这样做：
<Row>
<Column/>
</Row>然后适当地应用样式、classNames、带样式的标记。
说得更清楚一点：
正如您所看到的，DynamicComponent将使用父组件的样式、classNames、样式标记……(不是我所期望的行为)
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-30 17:52:44
在使用样式化组件时存在误解，因为标签是作为HTML标签使用的(input、div等)。最好的方法是分别定义StyledRow和StyledColumn，并以适当的名称使用它们。这也有助于使您的代码更具可读性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52093461
复制相关文章
相似问题