Javascript 反应循环以生成数组

我一直在尝试生成一个“简单”数组。我有两个变量要进行计算，然后将结果添加到ReactJS中的数组中

// Import Node Modules
import styled, { css } from 'styled-components'
import PropTypes from 'prop-types'
import React, { Component } from "react";

// Variables
const columns = props => props.columns; // is set to 3
const width = props => props.width;     // is set to 300
const Breakpoint = width * columns;
let list ="";

// this should be generated by looping over columns and width like [1*300,2*300,3*300] 

/*
const sizes = [];
var i;
for (i = 0; i < columns; i++) { 
    sizes.push(width * i)
}
*/

// but this obvisouly doesn't work in react :(


const sizes= [300,600,900]

// Class
{sizes.map(function(size, index){
  list = list + `@media (min-width: ${size}px) { grid-template-columns: repeat(${index + 1}, 1fr);};`
})}

let medias = css`${list}`;

export const GridContainer = styled.div`
  display: grid;
  grid-gap: ${props => props.gap}px;
  ${medias}
`

//导入节点模块
导入样式化，{css}来自“样式化组件”
从“道具类型”导入道具类型
从“React”导入React，{Component}；
//变数
const columns=props=>props.columns；//设置为3
const width=props=>props.width；//设置为300
常量断点=宽度*列；
let list=“”；
//这应该通过在列和宽度上循环生成，如[1*300,2*300,3*300]
/*
常量大小=[]；
var i；
对于（i=0；iprops.gap}px；
${medias}
`

---

我希望有人能指引我正确的方向。

给定

列

和

宽度

都是函数，

const Breakpoint=width*columns；

这没有意义-你不能用一个函数乘以一个函数。

对于（I=0；I也一样。这也不清楚
//类是什么{size.map（函数（size，index）{
应该做的事情`您还将Array.prototype.map（）用于经典（ES5）函数语法…但是你在函数体中没有
return
语句。宽度和列是样式化的组件道具，来自于你能编辑一点代码，然后放进沙盒吗？并向我们解释你希望看到什么…我编辑了沙盒，所以你可以看到我正在尝试做什么/它可以工作，但只是想知道数组大小为[]，而不是硬编码