主页 / coding / 问题 / 76926067
Accepted
Morton
Asked: 2023-08-18 10:18:05 +0800 CST

如何将动态参数从react tsx文件发送到css

  • 772

我使用gridwith css，如果数组编号是一、二或三，我需要确保元素位于中心。

<div className={styles.testWrap}>
  <div className={styles.testGrid}>
    {array.map((value, index) => {
      return (
        <div className={styles.logoBox} key={index}>
          <div
            onClick={() => router.push({ pathname: `./brand/${brand.id}` })}
            className={styles.logoContainer}
          >
            <NextImage src={brand.logoUrl} width={180} height={180} alt="pic" />
          </div>
        </div>
      );
    })}
</div>

CSS

.testWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: pink;
    .testGrid {
        display: grid;
        width: 100%;
        gap: 24px;
        justify-content: center;
        margin-bottom: 130px;
        @include sm {
            width: fit-content;
            margin: 0 auto;
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            margin-bottom: 197px;
        }
        @include md {
            // grid-template-columns: auto auto auto; if array number is three
            // grid-template-columns: auto auto; if array number is two
            // grid-template-columns: auto; if array number is one
            grid-template-columns: params; // How do I get dynamic params over here ?
            justify-content: center;
            grid-gap: 55px;
            width: 100%;
            margin-bottom: 195px;
        }
    }
}
css

1 个回答

  1. Best Answer

    要根据 React 组件中数组中的项目数量动态调整 grid-template-columns 属性，您可以有效地使用 CSS 自定义属性（通常称为 CSS 变量）。

    这个想法是利用 React 组件中的 JavaScript 字符串操作功能来动态生成 grid-template-columns 属性所需的值。

    这是一个建议的实现：

    <div 
  className={styles.testWrap}
  style={{
    "--dynamic-columns": "auto ".repeat(array.length).trim()
  }}
>
  <div className={styles.testGrid}>
    {/* ...rest of the code */}
  </div>
</div>

    在此方法中，我们使用JavaScript的字符串repeat()方法根据数组长度生成所需的“自动”重复，然后使用trim()修剪前导空格。

    .testWrap {
  /*... other styles ...*/
  
  .testGrid {
    /*... other styles ...*/

    @include md {
      grid-template-columns: var(--dynamic-columns);
      /*... other styles ...*/
    }
  }
}

    这种方法高效且可扩展。CSS 变量的利用确保了动态 JS 环境和 CSS 样式之间的无缝集成，为当前的挑战提供了一个优雅的解决方案。

    • 1

相关问题