如何正确使用“样式组件”？答案

【问题标题】：How do I correctly use 'styled-components'?如何正确使用“样式组件”？
【发布时间】：2020-10-12 15:48:23
【问题描述】：

我为我的应用程序创建了一个微调器。它按预期以各种方式工作。但是，我收到一条警告，指出我以错误的方式使用“样式化”。我尝试将组件转换为基于类的组件，但它不起作用。我 100% 肯定这不是创建这个组件的最佳方式，但我对 React 还比较陌生。我什至使用 Styled-components 的原因是因为 ":after" 在 JSX 内联样式中不可用。我将非常感谢任何人对此问题的任何建议。我认为有一个相对简单的解决方案，但我还没有找到它。

id 为“sc-bdnylx”的组件 styled.div 已被动态创建。您可能会看到此警告，因为您在另一个组件中调用了 styled。要解决这个问题，只需在任何渲染方法和函数组件之外创建新的 StyledComponents。

我用以下方式调用我的 Spinner：

<Spinner additionalclasses='mr20' size='small' color='#39FF14' />

Spinner 组件的代码：

import React from 'react'
import './spinner.css'
import styled from 'styled-components'

function Spinner(props) {
let wrapperStyles = {}
let spinnerStyles = {}

switch (props.size) {
    case 'extrasmall':
        wrapperStyles = { width: '20px', height: '20px' }
        spinnerStyles = { transform: `translateX(-38%) scale(0.25)` }
        break
    case 'small':
        wrapperStyles = { width: '40px', height: '40px' }
        spinnerStyles = { transform: `translateX(-25%) scale(0.5)` }
        break
    case 'medium':
        wrapperStyles = { width: '60px', height: '60px' }
        spinnerStyles = { transform: `translateX(-12.5%) scale(0.75)` }
        break
    case 'large':
        wrapperStyles = { width: '80px', height: '80px' }
        spinnerStyles = { transform: `translateX(-0%) scale(1)` }
        break
    case 'extralarge':
        wrapperStyles = { width: '120px', height: '120px' }
        spinnerStyles = { transform: `translateX(25%) scale(1.5)` }
        break
    case 'huge':
        wrapperStyles = { width: '240px', height: '240px' }
        spinnerStyles = { transform: `translateX(94%) scale(3)` }
        break
    default:
        wrapperStyles = {}
        spinnerStyles = {}
}

let color = props.color

const SpinnerDiv = styled.div`
    &:after {
        background: ${color};
    }
`

return (
    <div
        className={`spinner_wrapper ${props.additionalclasses}`}
        style={wrapperStyles}
    >
        <div className='spinner_container' style={spinnerStyles}>
            <div className='lds-spinner' style={{ color: `${color}` }}>
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
                <SpinnerDiv />
            </div>
        </div>
    </div>
)
}

export default Spinner

【问题讨论】：

标签： javascript reactjs styled-components

【解决方案1】：

您需要做的是将 SpinnerDiv 样式的组件移到功能组件之外，因为每次重新渲染组件时都会重新创建它。

在您的渲染函数中，您可以根据需要将道具传递给styled-component，如下所示：

<SpinnerDiv color={/* a color */} />

然后在样式化组件中使用它：

const SpinnerDiv = styled.div`
    &:after {
        background: ${props => props.color};
    }
`;

或者更好的是，你可以解构props：

const SpinnerDiv = styled.div`
    &:after {
        background: ${({ color }) => color};
    }
`;

【讨论】：