我想做一个动态组件。(动态标签将是一个样式化的组件 -> 情感)
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>
那么出于某种原因,动态子代将使用动态父代的样式。
有什么我想念的吗?
PS:
如果不使用动态样式,我会这样做:
<Row>
<Column/>
</Row>
然后正确应用样式、类名、样式标签。
为了更清楚一点:
如您所见,DynamicComponent 将使用父级的样式、类名、样式标签...(不是我期望的行为)