Perubahan pembolehubah warna untuk setiap item yang dipetakan Tailwind bertindak balas

Question

Saya mahu sebaik sahaja saya menambah item lain ke dalam senarai, warna item sebelumnya tidak boleh berubah

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

Answer 1

Anda boleh menyelesaikan masalah ini dengan dua cara

1. Gunakan petikan

import { useRef } from "react";

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

  return (
    

      ...
    
  );
};

2.Status penggunaan

import { useState } from "react";

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

  return (
    

      ...
    
  );
};

Kalau tak nak tukar warna, saya rasa useRef lagi sesuai.

Lihat di siniPratonton langsung