Perubahan pembolehubah warna untuk setiap item yang dipetakan Tailwind bertindak balas
P粉982009874
P粉982009874 2024-04-04 00:13:35
0
1
529

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

P粉982009874
P粉982009874

membalas semua(1)
P粉237125700

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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan