React循环创建数组

Question

我一直在尝试生成一个“简单”数组。我有两个要进行计算的变量，然后将结果添加到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}
`

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