javascript - 反应循环以制作数组
问题描述
我一直在尝试生成一个“简单”数组。我有 2 个要计算的变量,然后将结果添加到 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}
`
我希望有人能引导我朝着正确的方向前进。
解决方案
推荐阅读
- c - 分配给另一个参数时来自不兼容指针类型的警告分配
- sql - 根据复杂条件选择
- c++ - 当多个目标使用相同的源文件时,如何使用 --save-temps 保存程序集文件?
- syntax-error - 局部变量上不支持的“const”声明(Julia 中的 react_network)
- react-native - Expo ImagePicker 未在 IOS 上打开
- d3.js - 理解 Les Miserables 共现数据
- laravel-5.3 - 在 Laravel 5.3 中更新数据时,RouteCollection.php 第 161 行中的 NotFoundHttpException
- node.js - 如何在 ReactJs API 调用上维护 Node 后端的会话
- c# - 从 Visual Studio 2008 调用 powershell v4 及更高版本
- php - 以更易读的方式过滤和打印数组