Javascript 如何：在css中随机化元素位置和大小；网格“；在React应用程序中

我需要关于在我定义的网格中随机化html元素位置和大小的概念的帮助。我正在使用React进行我的第一个项目，我的任务是创建一个应用程序，在该应用程序中，我向用户显示两组黑色“卡”（矩形），用户必须选择一个

在设计描述中，我被告知将这些矩形集的位置和大小随机化，但每侧的数量始终是设置的

换句话说，我渲染屏幕左侧的3个矩形，然后右侧的4个，然后用户尝试回答哪一侧有更多的矩形

下面我有一段相关的代码（我希望它能合理地显示出来，这是非常新的）。itemContents数组只是从我的服务器中提取有关正在处理的项目的值，因此在本例中，它将只返回一个作为字符串的单个数字，用于确定要渲染的矩形的正确数量

for (let index = 0; index < parseInt(itemContents[0]); index++) { 
leftSideCards.push(<li id="left-side-items"> &#9608; </li>)
}

for (let index = 0; index < parseInt(itemContents[1]); index++) {
rightSideCards.push(<li id="left-side-items"> &#9608; </li>)
}

choiceArea = (
                <div className="card-compare-choiceArea">
                    <div id="card-first-choice">{leftSideCards}</div>
                    <span id="space"></span>
                    <div id="card-second-choice">{rightSideCards}</div>
                    <label id="saku">Text!</label>
                    <span id="space2" key="space2">{feedback}</span>
                    <label id="late">Text!</label>
                </div>
            );
        }

return (
        <div className="neure-number-compare">
             {choiceArea}
        </div>
       );
    }

所以我的逻辑是创建两个网格，每边一个（“卡第一选择和卡第二选择”），然后有一组列（3），然后将矩形数组设置为其内容。所以我们现在讨论的问题是，将一个矩形的网格部分随机化，并将所述矩形的大小随机化

现在，我的代码在其他方面运行良好，但它显然只是按照顺序渲染正方形，逐个填充列，并相应地添加行

我不确定使用UTF-8几何形状来创建黑色矩形是否是随机化其属性的好方法，或者我是否应该使用其他方法来创建矩形（这只是我发现的最简单的方法）。请建议其他人，如果你有一个工作的解决方案，我的问题与它

显然，如果有一个更简单更好的方法来做这件事（我只能假设这是一个给定的），我愿意学习/听取其他选择

---

由于我是第一次处理React的真实项目的初级开发人员，而且对CSS也不是那么精通，所以我完全认为有很多事情是多余的，或者可以做得更好（温和一些）。

对于随机化数组，您可以使用

您可以将栅格的大小设置为“左右尺寸的最大尺寸+总尺寸的1/3”，如下所示

let gridSize = Math.max(...itemContents.map((item) => parseInt(item)));
gridSize = Math.ceil(gridSize + gridSize / 3);

这是我的代码变体

  const itemContents = ["5", "7"];
  const leftSideCards = [];
  const rightSideCards = [];

  let gridSize = Math.max(...itemContents.map((item) => parseInt(item)));
  gridSize = Math.ceil(gridSize + gridSize / 3);

  const addInitialSet = (cardsList) => {
    for (let index = 0; index < gridSize; index++) {
      cardsList.push(<li id="left-side-items" />);
    }
  };

  const addCards = (cardsList, itemNumber) => {
    for (let index = 0; index < itemNumber; index++) {
      cardsList[index] = <li id="left-side-items"> &#9608; </li>;
    }
  };

  const shuffle = (array) => {
    let currentIndex = array.length,
      temporaryValue,
      randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

  addInitialSet(leftSideCards);
  addInitialSet(rightSideCards);
  addCards(leftSideCards, parseInt(itemContents[0]));
  addCards(rightSideCards, parseInt(itemContents[1]));
  shuffle(leftSideCards);
  shuffle(rightSideCards);

  const choiceArea = (
    <div className="card-compare-choiceArea">
      <div id="card-first-choice">{leftSideCards}</div>
      <span id="space" />
      <div id="card-second-choice">{rightSideCards}</div>
      <label id="saku">Text!</label>
      <span id="space2" key="space2">
        "feedback"
      </span>
      <label id="late">Grid size {gridSize}</label>
    </div>
  );

  return <div className="neure-number-compare">{choiceArea}</div>;
}

const itemContents=[“5”、“7”]；
const leftSideCards=[]；
常量rightSideCards=[]；
让gridSize=Math.max（…itemContents.map（（item）=>parseInt（item））；
gridSize=Math.ceil（gridSize+gridSize/3）；
常量addInitialSet=（cardsList）=>{
for（让index=0；index）；
}
};
const addCards=（cardsList，itemNumber）=>{
for（让索引=0；索引和#9608；；
}
};
常量洗牌=（数组）=>{
让currentIndex=array.length，
时间价值，
随机指数；
//虽然还有一些元素需要洗牌。。。
而（0！==currentIndex）{
//选择剩余的元素。。。
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
//并将其与当前元素交换。
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
返回数组；
};
附加设置（左侧卡片）；
附加设置（右侧卡）；
addCards（leftSideCards，parseInt（itemContents[0]））；
addCards（righsidecards，parseInt（itemContents[1]））；
洗牌（左边牌）；
洗牌（右侧牌）；
const choiceArea=(
{leftSideCards}
{rightSideCards}
短信！
“反馈”
网格大小{gridSize}
);
返回{choiceArea}；
}

  const itemContents = ["5", "7"];
  const leftSideCards = [];
  const rightSideCards = [];

  let gridSize = Math.max(...itemContents.map((item) => parseInt(item)));
  gridSize = Math.ceil(gridSize + gridSize / 3);

  const addInitialSet = (cardsList) => {
    for (let index = 0; index < gridSize; index++) {
      cardsList.push(<li id="left-side-items" />);
    }
  };

  const addCards = (cardsList, itemNumber) => {
    for (let index = 0; index < itemNumber; index++) {
      cardsList[index] = <li id="left-side-items"> &#9608; </li>;
    }
  };

  const shuffle = (array) => {
    let currentIndex = array.length,
      temporaryValue,
      randomIndex;

    // While there remain elements to shuffle...
    while (0 !== currentIndex) {
      // Pick a remaining element...
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;

      // And swap it with the current element.
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
    }

    return array;
  };

  addInitialSet(leftSideCards);
  addInitialSet(rightSideCards);
  addCards(leftSideCards, parseInt(itemContents[0]));
  addCards(rightSideCards, parseInt(itemContents[1]));
  shuffle(leftSideCards);
  shuffle(rightSideCards);

  const choiceArea = (
    <div className="card-compare-choiceArea">
      <div id="card-first-choice">{leftSideCards}</div>
      <span id="space" />
      <div id="card-second-choice">{rightSideCards}</div>
      <label id="saku">Text!</label>
      <span id="space2" key="space2">
        "feedback"
      </span>
      <label id="late">Grid size {gridSize}</label>
    </div>
  );

  return <div className="neure-number-compare">{choiceArea}</div>;
}