無法在forLoop內分配值

我正在嘗試為 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：點擊。！

uj5u.com熱心網友回復：

我修復了 2 個錯誤。

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;

uj5u.com熱心網友回復：

我想你忘了length在你的for loop.

這是作業代碼：

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>
    );
});

uj5u.com熱心網友回復：

如果您更新組件內的變數，它不會重新渲染，您應該使用它useState來跟蹤功能組件中的所有狀態更改，并且由于您正在更新回圈中的所有元素，因此您也需要使用useEffect，這是因為更改將觸發重新渲染，然后您再次更新，重新渲染等等，無限重新渲染。使用 .random 只需要完成一次隨機useEffect。

import React, { useEffect, useState } from "react";

// Splitting Letters
const SplitText = React.memo(({ str }) => {
  const defaultCustomStyle = {
    position: "absolute",
    top: "",
    left: "",
    zIndex: "initial",
    color: "green"
  };

  const [customStyles, setCustomStyles] = useState([]);
  useEffect(() => {
    // Calc here the random values
    var randLeft = Math.floor(Math.random() * 1000);
    var randTop = Math.floor(Math.random() * 600);
    const auxCustomStyle = { ...defaultCustomStyle };
    for (let i = 0; i < str.split(""); i  ) {
      auxCustomStyle.top =  randTop   "px";
      auxCustomStyle.left =  randLeft   "px";
    }
    setCustomStyles((prevCustomStyles) => {
      prevCustomStyles.push(auxCustomStyle);
      return prevCustomStyles;
    });
  }, []);

  return (
    <div>
      {str.split("").map((item, index) => {
        let letter = item;
        for (let i = 0; i < item; i  ) {
          letter = letter   i;
        }
        return (
          <div key={index} style={customStyles[index]}>
            {letter}
          </div>
        );
      })}
    </div>
  );
});

export default SplitText;

檢查這是否適合您。

標籤：javascript css 反应 反应钩子

上一篇：文本溢位：網格列中flexbox中的省略號

下一篇：何時使用偽類以及何時在CSS中使用偽元素選擇器