6、React 中的事件处理、条件渲染与列表渲染

React 中的事件处理、条件渲染与列表渲染

1. React 中的事件处理

在 React 里，事件处理是管理用户交互的关键。当需要向事件处理函数传递参数时，可使用箭头函数包裹该函数。例如：

// GreetUser.jsx
const greetUser = (name, age) => {
  alert(`Hello, ${name}! You are ${age} years old.`);
}
export default function App() {
  return (
    <div>
      <button onClick={() => greetUser("Alice", 30)}>Greet</button>
    </div>
  );
}

在这个例子中， onClick 事件处理函数中的箭头函数将 name 和 age 两个参数传递给 greetUser 函数。这样做能确保函数仅在事件触发时被调用，而非立即执行。

2. React 中的条件渲染

条件渲染是 React 的一个基础概念，它能让组件根据特定逻辑或条件动态调整输出。以下是几种常见的条件渲染方法：
- 使用 if 语句 ：当处理复杂条件时，在 JSX 外部使用 if 语句是控制渲染内容的清晰直接的方式。