如何将styled-components的props值提取到JavaScript变量中？

嘿，我来帮你搞定这个问题！你现在的问题在于，你把一个箭头函数赋值给了Columns变量，而不是直接获取到props里的实际数值——毕竟在styled.div的定义之外，我们根本拿不到组件渲染时才会传入的props呀😉

我给你两种正确的写法，你可以按需选择：

方法1：直接在模板字符串的插值里处理逻辑 #

把生成列格式的逻辑放进grid-template-columns的插值函数里，这样就能直接访问到组件接收的props了：

const CardBox = styled.div`
  display: grid;
  grid-template-columns: ${props => {
    let columnCount = '';
    // 这里直接用props.Columns拿到传入的数值
    for (let i = 0; i < props.Columns; i++) {
      columnCount += "Auto ";
    }
    // 去掉最后多余的空格，避免CSS语法问题
    return columnCount.trim();
  }};
`;

方法2：抽成辅助函数（更易维护） #

如果逻辑比较复杂，把它单独抽成一个函数会更清晰：

// 单独写一个生成列格式的函数
const getGridColumns = (columnNumber) => {
  let columnCount = '';
  for (let i = 0; i < columnNumber; i++) {
    columnCount += "Auto ";
  }
  return columnCount.trim();
};

// 在styled组件里调用这个函数，传入props里的数值
const CardBox = styled.div`
  display: grid;
  grid-template-columns: ${props => getGridColumns(props.Columns)};
`;

额外小技巧：简化循环逻辑 #

其实用JavaScript的repeat方法可以一行搞定，不用写循环：

const CardBox = styled.div`
  display: grid;
  grid-template-columns: ${props => "Auto ".repeat(props.Columns).trim()};
`;

这样当你使用<CardBox Columns="3">时，就会生成grid-template-columns: Auto Auto Auto的CSS啦！

内容的提问来源于stack exchange，提问作者Flemming Krog Olsen