列表渲染與條件渲染
在 React 開發中，列表渲染 和 條件渲染 是處理動態數據和用戶交互的基礎技術。通過列表渲染，你可以根據數據動態生成 UI 元素；而條件渲染則讓你根據特定條件展示不同的內容。這兩個技能在實際項目中非常常見，比如展示產品列表或根據用戶登錄狀態顯示不同界面。
本文將深入講解如何在 React 中實現列表渲染和條件渲染，并提供代碼示例和實踐指導。無論你是初學者還是想復習基礎知識，這篇教程都將為你提供清晰且實用的內容。
1. 列表渲染
列表渲染是指根據數據數組生成一組 JSX 元素的過程。在 React 中，通常使用 JavaScript 的 map 函數來實現。
1.1 基本用法
假設你有一個任務列表的數據：
const tasks = [{ id: 1, text: '學習 React' },{ id: 2, text: '練習 JSX' },{ id: 3, text: '掌握 Hooks' }
];
你可以用 map 函數將這個數組渲染為一個列表：
function TaskList() {return (<ul>{tasks.map(task => (<li key={task.id}>{task.text}</li>))}</ul>);
}
tasks.map將每個任務對象轉換為一個<li>元素。key={task.id}為每個列表項指定一個唯一標識。
1.2 key 屬性的重要性
key 是 React 中的特殊屬性，用于幫助 React 高效地更新 DOM。它在列表渲染中必不可少。
- 為什么需要 key：React 用
key來追蹤每個元素的變化，確保只更新必要的部分。 - 要求：
key必須在同級元素中唯一且穩定。 - 錯誤示例：使用數組索引作為
key（如key={index}）在動態列表中可能導致問題，因為索引會隨列表變化而改變。 - 正確做法：使用數據中的唯一標識符，如
id。
示例：
// 錯誤：使用索引作為 key
{tasks.map((task, index) => (<li key={index}>{task.text}</li>
))}// 正確：使用唯一 ID
{tasks.map(task => (<li key={task.id}>{task.text}</li>
))}
2. 條件渲染
條件渲染是指根據條件控制 UI 元素的顯示。React 沒有專門的條件渲染語法，而是利用 JavaScript 的條件語句。
2.1 使用 if-else
在函數外部使用 if-else 判斷：
function Welcome({ isLoggedIn }) {if (isLoggedIn) {return <p>歡迎回來！</p>;} else {return <p>請登錄。</p>;}
}
2.2 使用三元運算符
在 JSX 中使用三元運算符，適合簡單條件：
function UserStatus({ isLoggedIn }) {return (<div>{isLoggedIn ? <p>歡迎回來！</p> : <p>請登錄。</p>}</div>);
}
2.3 使用邏輯運算符
用 && 運算符在條件為 true 時渲染內容：
function Alert({ hasUpdate }) {return (<div>{hasUpdate && <p>有新更新！</p>}</div>);
}
- 如果
hasUpdate為 false，則什么都不渲染。
2.4 返回 null 隱藏內容
通過返回 null 完全不渲染組件：
function SecretMessage({ show }) {if (!show) return null;return <p>這是一個秘密消息。</p>;
}
3. 實際應用：任務列表
讓我們結合列表渲染和條件渲染，創建一個簡單的任務列表應用，支持標記任務完成和過濾已完成任務。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任務列表</title><script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.development.js"></script><script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.development.js"></script><script src="https://cdn.jsdelivr.net/npm/babel-standalone@6.26.0/babel.min.js"></script><script src="https://cdn.tailwindcss.com"></script>
</head>
<body><div id="root" class="p-4"></div><script type="text/babel">function TodoApp() {const [todos, setTodos] = React.useState([{ id: 1, text: '學習 React', completed: false },{ id: 2, text: '練習 JSX', completed: true },{ id: 3, text: '掌握 Hooks', completed: false }]);const [showCompleted, setShowCompleted] = React.useState(true);const toggleCompleted = (id) => {setTodos(todos.map(todo =>todo.id === id ? { ...todo, completed: !todo.completed } : todo));};const filteredTodos = showCompleted? todos: todos.filter(todo => !todo.completed);return (<div className="max-w-md mx-auto"><h1 className="text-2xl font-bold mb-4">任務列表</h1><label className="flex items-center mb-4"><inputtype="checkbox"checked={showCompleted}onChange={() => setShowCompleted(!showCompleted)}className="mr-2"/>顯示已完成任務</label><ul className="space-y-2">{filteredTodos.map(todo => (<likey={todo.id}className="flex justify-between items-center p-2 bg-gray-100 rounded"><spanstyle={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>{todo.text}</span><buttononClick={() => toggleCompleted(todo.id)}className="px-2 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">{todo.completed ? '標記未完成' : '標記完成'}</button></li>))}</ul></div>);}const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<TodoApp />);</script>
</body>
</html>
4. 如何運行
- 將以上代碼保存為
index.html文件。 - 在瀏覽器中打開該文件，你將看到一個任務列表。
- 你可以：
- 點擊按鈕切換任務的完成狀態。
- 勾選或取消勾選“顯示已完成任務”來過濾列表。
5. 總結
通過這篇教程，你學習了：
- 如何使用
map進行列表渲染并正確設置key。 - 如何通過
if-else、三元運算符和邏輯運算符實現條件渲染。 - 如何結合兩者構建一個簡單的任務列表應用。
這些技能是 React 開發的基礎，掌握它們將幫助你更自信地構建動態和交互式的界面。下一篇文章將深入學習React的工作原理：虛擬 DOM 與 Diff 算法，敬請期待！
