javascript 样式化的零部件动态标记名称

eqoofvh9 于 2023-05-27 发布在 Java

关注(0)|答案(3)|浏览(150)

我想做一个动态的组件。（动态TAG将是样式化组件->情感）

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>

那么样式、className、样式化的标记就被正确地应用。
让我们再清楚一点：

正如你所看到的，DynamicComponent将使用父类的样式、className、样式化标签……（不是我所期望的行为）

JavaScript

来源：https://stackoverflow.com/questions/52093461/styled-component-dynamic-tag-name

3条答案

按热度按时间

r6vfmomb1#

下面是为 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>