我希望一旦我在清單中新增另一個項目,前一個項目的顏色就不應更改
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粉2371257002024-04-04 18:40:53
你可以用兩種方式解決這個問題
import { useRef } from "react"; const NoteItem = ({ note }) => { const { colors, randomColorFunction } = useContext(AppContext); const color = useRef(randomColorFunction(colors)); return (...); };
import { useState } from "react"; const NoteItem = ({ note }) => { const { colors, randomColorFunction } = useContext(AppContext); const [color] = useState(randomColorFunction(colors)); return (...); };
如果您不想更改顏色,我認為 useRef
更合適。
請參閱此處即時預覽