无法在 for 循环中分配值答案

【问题标题】：unable to assign values inside a forLoop无法在 for 循环中分配值
【发布时间】：2021-12-16 23:11:51
【问题描述】：

我正在尝试为我的 for 循环中的“customStyle.top”分配一个随机值，但 customStyle.top/customStyle.Left 值不会随机变化。我的代码如下：

import React from "react";

const customStyle = {
  position: "absolute",
  top: "",
  left: "",
  zIndex: "initial",
  color: "green"
};

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  return (
    <div>
      {str.split("").map((item, index) => {
        var randLeft = Math.floor(Math.random() * 1000);
        var randTop = Math.floor(Math.random() * 600);

        let letter = item;

        for (let i = 0; i < item; i++) {
          customStyle.top = +randTop + "px";
          customStyle.left = +randLeft + "px";

          letter = letter + i;
        }
        console.log(customStyle.top);

        return (
          <div key={index} style={customStyle}>
            {letter}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;

链接到我的 CodeSandbox：Click.!

【问题讨论】：

标签： javascript css reactjs react-hooks

【解决方案1】：

我修复了 2 个错误。

您正在“”处拆分字符串。所以你只会得到字母，而不是一串多个字母。这意味着在这里使用循环是无稽之谈！
在您的代码中，您使用了对customStyle 的引用。任何时候你改变一个值，你都在改变它。因此复制该值或创建一个新值。在输出中插入该值。

代码

import React from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  return (
    <div>
      {str.split("").map((item, index) => {
        const style = { 
          position: "absolute",
          top: Math.floor(Math.random() * 600) + 'px',
          left: Math.floor(Math.random() * 600) + 'px',
          zIndex: "initial",
          color: "green"
        };

        return (
          <div key={index} style={style}>
            {item}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;

【讨论】：

是的，你是正确的@Rob Monhemius，你删除了循环本身，因为 map 正在做循环的事情。代码真的很简单，在这里我尝试了几个小时的所有方法。非常感谢，您做了一件很棒的事情，包括 *600，实际上我正在尝试修复容器的高度和宽度，以便它也可以响应。

【解决方案2】：

我认为您忘记在您的 for loop 中添加 length 关键字。

这是工作代码：

import React from "react";

const customStyle = {
    position: "absolute",
    top: "",
    left: "",
    zIndex: "initial",
    color: "green"
};

// Splitting Letters
const SplitText = React.memo(({ str }) => {
    return (
        <div>
            {str.split("").map((item, index) => {
                var randLeft = Math.floor(Math.random() * 1000);
                var randTop = Math.floor(Math.random() * 600);

                let letter = item;

                for (let i = 0; i < item.length; i++) { // item.length
                    customStyle.top = +randTop + "px";
                    customStyle.left = +randLeft + "px";

                    letter = letter + i;
                }
                console.log(customStyle.top);

                return (
                    <div key={index} style={customStyle}>
                        {letter}
                    </div>
                );
            })}
        </div>
    );
});

【讨论】：