每个映射项目的颜色变量发生变化顺风反应-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

每个映射项目的颜色变量发生变化顺风反应

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

[React讨论组]

615

我希望一旦我在列表中添加另一个项目，前一个项目的颜色就不应更改

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.使用状态

import { useState } from "react";

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

  return (
    
      ...
    
  );
};

如果您不想更改颜色，我认为 useRef 更合适。

请参阅此处实时预览

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>