7

我想做一个动态组件。(动态标签将是一个样式化的组件 -> 情感)

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 将使用父级的样式、类名、样式标签...(不是我期望的行为)

4

2 回答 2

17

下面的示例为styled-component创建动态标签名称:

// All headings use the same styled-component "Heading" function
const StyledHeading = styled.div`
    font-size: ${({level}) => 4/level }em; // <- dynamic font size
    font-weight: 300;
    margin: 0;
`

// the trick here is the "as={...}" to create dynamic tag name
const Heading = ({level = 1, children}) => 
    <StyledHeading as={`h${level}`} level={level}>
        {children}
    </StyledHeading>


ReactDOM.render([
    <Heading>Hello, world!</Heading>,
    <Heading level={2}>Title 2</Heading>,
    <Heading level={3}>Title 3</Heading>
  ] ,document.body
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/styled-components@4.4.1/dist/styled-components.min.js"></script>

参考:

于 2019-07-08T12:01:14.753 回答
0

使用 styled-components 存在误解,因为标签旨在用作 HTML 标签(输入、div 等)。最好的方法是分别定义 StyledRow 和 StyledColumn 并以适当的名称使用它们。这也将有助于使您的代码更具可读性。

于 2018-08-30T09:52:44.107 回答