Javascript 已动态创建样式为…的组件。您可能会看到此警告，因为您'；我在另一个组件中调用了styled

在ReactJS中，当使用样式化组件时，我在尝试动态生成样式时会遇到以下问题

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

下面是我的代码：

  const getColumn = (ratio) => {
    return (styled.div`
        flex: ${ratio}; 
    `)
  } 

const TableHeaderComponent = ({headers, columnRatio}) => {

return ( 
    <TableHeader>
        {
        headers.map((header, index) => {
            const Column = getColumn(columnRatio[index]);
            return(<Column key={index} >{header}</Column>)
        }) }

    </TableHeader>
 );
}

export default TableHeaderComponent;

const getColumn=（比率）=>{
return（styled.div）`
flex:${ratio}；
`)
} 
const TableHeaderComponent=（{headers，columnRatio}）=>{
报税表（
{
headers.map（（头，索引）=>{
const Column=getColumn（columnRatio[index]）；
返回（{header}）
}) }
);
}
导出默认TableHeaderComponent；

我知道我得到这个警告是因为我通过getColumn方法动态生成样式化组件。但是我怎么才能避开这个问题呢

我无法从道具中获得动态“比率”值，因为它在我迭代时不断变化

---

提前感谢！：）

您可以创建一个列组件作为样式组件，并使用道具设置特定属性

const Column = styled.div`
        flex: ${props => props.ratio}; 
    `

const TableHeaderComponent = ({headers, columnRatio}) => {

return ( 
    <TableHeader>
        {
          headers.map((header, index) => {
            return(
               <Column key={index} ratio={columnRatio[index]}>{header}</Column>
            )
          })
        }

    </TableHeader>
 );
}

export default TableHeaderComponent;

const Column=styled.div`
flex:${props=>props.ratio}；
`
const TableHeaderComponent=（{headers，columnRatio}）=>{
报税表（
{
headers.map（（头，索引）=>{
返回(
{header}
)
})
}
);
}
导出默认TableHeaderComponent；

这不行，因为比率值与道具无关。当我遍历头部数组时，它会不断变化。在下面提到的代码部分：{headers.map（（header，index）=>{return（{header}}}），这就是为什么我们要将

ratio={columnRatio[index]}

传递到column组件感谢mate…这才有效！我不知道我们可以设置道具这样的非反应功能。再次感谢！这是因为样式化组件的特殊语法使其看起来像非反应函数，但在某种意义上它只是组件上的一个HOC