javascript - 样式...的组件是动态创建的。您可能会看到此警告，因为您在另一个组件中调用了 styled

Question

在 ReactJS 中使用 styled-component 时，我在尝试动态生成样式时遇到了以下问题。

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

下面是我的代码:

  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;

我知道我收到此警告是因为我通过 getColumn 方法动态生成样式组件。但我怎样才能解决这个问题？

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

提前致谢! :)

Answer 1

您可以创建一个 Column 组件作为样式组件并使用 Prop 来设置特定属性

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;