我是React/Javascript新手,一天之内都不能真正解决这个问题.

我对球员的名字有异议.

let players = {'Amber', 'Thomas', 'Trump', 'Michael', 'Someone'};

基本上,players是一个输入函数,用户在其中键入自己的名字,我将它们存储在这里.

我有一个css用于将它们显示为网格.

const styles = {
   section: {
     display: 'grid',
     gridGap: '5px',
     boxSizing: 'border-box',
     borderColor: 'black',
     padding: '5px',
     gridTemplateColumns: 'repeat(1, 1fr)',
}

当球员的长度增加时,我想更改"重复(value,1fr)"中的value.

style = {list.length > 6 ? changeValueMoreSix : changeValueSixOrLess

我想把他们每六个人分开,以防有更多的球员.

E、 g.

Player1
Player2
Player3
Player4
Player5

case 2:11名玩家:

Player1   Player7
Player2.  Player8
Player3   Player9
Player4   Player10
Player5   Player11
Player6

基本思想是创建一个列,如果它超过6、12、18等,或者列=玩家.长度/6

推荐答案

如果要根据repeat(**value**, 1fr)中的列表长度计算值,可以使用CSS值,这些值以列表元素包装的内联样式附着:

计算列数量(基于列表长度和6分隔符;

const columnAmount = Math.ceil(list.length / 6);

然后,在模板中使用此值:

<section 
  class="list-wrapper" 
  style={{ --column-amount: this.props.columnAmount }}
>
  <!-- list items  -->
</section>

并更新您的CSS:

const styles = {
   section: {
     display: 'grid',
     gridGap: '5px',
     boxSizing: 'border-box',
     borderColor: 'black',
     padding: '5px',
     gridTemplateColumns: 'repeat(var(--column-amount, 1), 1fr)',
}

其中var(--column-amount, 1)中的--column-amount是动态CSS值,1是回调值.

Css相关问答推荐

如何在css中创建文件div效果

媒体查询在生产中没有响应:React 18 应用程序

CSS 内联 Flex 和段落换行

如何剪切一个正方形以便我可以绘制追逐边框?

如何解决 Spotify 嵌入代码中的白色背景错误?

如何使我的标语(h1元素)不居中对齐?

使 MUI 自动完成打断长词以适合布局

如何使 css 不重复同一个类?

在 SVG 元素上方添加标签而不移动 SVG 元素

我无法在 next.js 应用程序中传播 daisyui 的主题

不能在带有 SCSS 的过滤器灰度内使用 CSS 变量

如何在 Angular 中使用 CSS 设置 FontAwesome 图标的大小?

子组件的css会影响整个页面

带有图像的 CSS 网格在 Firefox 中表现不同

如何为使用jsTreeR拖入层次 struct node 的元素添加顺序编号?

如何使多个 div 显示在一行中但仍保留宽度?

如何填充 100% 的剩余高度?

内联