styled-components如何不在组件内创建样式组件即可通过props传递样式

实现原理 #

你原有写法的性能问题根源是每次Text组件渲染时都会重新创建一个新的styled组件实例，将styled组件定义移到组件外部，只会初始化一次，就能解决性能问题。

方案1：动态样式由styled-components处理（自动生成类名） #

import React from 'react'
import styled from 'styled-components'

// 定义在组件外部，仅初始化一次
const StyledText = styled.p`
  color: #000;
  ${props => Object.entries(props.styles || {}).map(([key, value]) => `${key}: ${value};`).join('')}
`

export const Text = ({ as = 'p', children, styles = {} }) => {
  return <StyledText as={as} styles={styles}>{children}</StyledText>
}

方案2：动态样式走原生内联style属性（完全匹配期望输出） #

如果你需要最终渲染的HTML直接携带style属性，不需要styled-components抽离成类，用这个写法性能更高：

import React from 'react'
import styled from 'styled-components'

const StyledText = styled.p`
  color: #000;
`

export const Text = ({ as = 'p', children, styles = {} }) => {
  return <StyledText as={as} style={styles}>{children}</StyledText>
}

注：你给出的期望输出HTML中styles为笔误，原生HTML动态样式属性为style，该方案渲染结果完全符合标准规范，实际输出为<p style="height: 10px"></p>。

调用方式 #

两种方案都支持你期望的用法，无需调整调用代码：

<Text styles={{ height: "10px" }} />

内容的提问来源于stack exchange，提问作者Jamie Hutber