Javascript 如何正确使用'；样式化组件'；？

我为我的应用程序创建了一个微调器。它在各个方面都按预期工作。然而，我收到了一条警告，指出我使用“Styled”的方式是错误的。我试图将该组件转换为基于类的组件，但没有成功。我100%肯定这不是创建此组件的最佳方式，但我对反应相对较新。我之所以使用样式化组件，是因为“：after”在JSX内联样式中不可用。我非常感谢任何人对这个问题提出的任何建议。我假设有一个相对简单的解决方案，但我还没有找到

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

我用以下命令调用我的微调器：

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

微调器组件的代码：

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

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

从“React”导入React
导入“./spinner.css”
从“样式化组件”导入样式化
功能微调器（道具）{
设wrapperStyles={}
设喷丝头样式={}
开关（道具尺寸）{
“超小型”案例：
包装器样式={宽度：'20px'，高度：'20px'}
喷丝头样式={transform:`translateX（-38%）比例（0.25）`}
打破
“小型”案例：
包装器样式={宽度：'40px'，高度：'40px'}
喷丝头样式={transform:`translateX（-25%）比例（0.5）`}
打破
案例“中等”：
包装器样式={宽度：'60px'，高度：'60px'}
喷丝头样式={transform:`translateX（-12.5%）比例（0.75）`}
打破
“大型”案例：
包装器样式={宽度：'80px'，高度：'80px'}
喷丝头样式={transform:`translateX（-0%）比例（1）`}
打破
“超大”案例：
包装器样式={宽度：'120px'，高度：'120px'}
喷丝头样式={transform:`translateX（25%）比例（1.5）`}
打破
案例“巨大”：
包装器样式={宽度：'240px'，高度：'240px'}
喷丝头样式={transform:`translateX（94%）比例（3）`}
打破
违约：
包装器样式={}
喷丝头样式={}
}
让颜色=道具颜色
常量喷丝头div=styled.div`
&：之后{
背景：${color}；
}
`
返回(
)
}
导出默认微调器

您需要做的是将

SpinnerDiv

样式化组件移到功能组件之外，因为每次组件重新渲染时都会重新创建该组件

在渲染函数中，您可以根据需要将道具传递给

样式化组件

，如下所示：

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

或者更好的是，您可以分解

道具

：

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