我想做一个动态组件。(动态标签将是一个带有样式的组件-> 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、样式标记……(不是我所期望的行为)
https://stackoverflow.com/questions/52093461
复制相似问题