亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

社群

學(xué)習(xí)

工具庫

AI工具

休閒

繁體中文

每個映射項(xiàng)目的顏色變數(shù)都會改變順風(fēng)反應(yīng)

P粉982009874 2024-04-04 00:13:35

690

我希望一旦我在清單中新增另一個項(xiàng)目，前一個項(xiàng)目的顏色就不應(yīng)更改

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = randomColorFunction(colors);
  return (
    <div
      className={`flex flex-col min-h-28  py-6 justify-between px-3 rounded-md whitespace-pre-wrap break-words`}
      style={{ backgroundColor: `${color}` }}
    >
      <span className="font-bold text-3xl">{note.title}</span>
      <span>{note.content}</span>
      <small className="text=xl">{note.date}</small>
    </div>
  );
};

P粉982009874

全部回覆(1)

P粉2371257002024-04-04 18:40:53 1樓

你可以用兩種方式解決這個問題

1。使用引用

import { useRef } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const color = useRef(randomColorFunction(colors));

  return (
    
      ...
    
  );
};

2.使用狀態(tài)

import { useState } from "react";

const NoteItem = ({ note }) => {
  const { colors, randomColorFunction } = useContext(AppContext);
  const [color] = useState(randomColorFunction(colors));

  return (
    
      ...
    
  );
};

如果您不想更改顏色，我認(rèn)為 useRef 更合適。

請參閱此處即時預(yù)覽