React 组件不仅仅是 JSX 模板 – 它们是完整的 JavaScript 函数，这意味着我们可以在其中添加任何所需的 JavaScript 逻辑。让我们来探索如何在组件中添加逻辑，并使用这些逻辑来控制显示内容。
组件作为 JavaScript 函数
当我们创建一个 React 组件时，我们实际上是在定义一个 JavaScript 函数。我们在这个函数内部（但在 return 语句之外）编写的任何代码，都会在组件初始化时执行。
添加业务逻辑
让我们在Footer组件里添加一些基本的业务逻辑，根据当前时间来确定我们的披萨店是否营业：
function Footer() {
const hour = new Date().getHours();
const openHour = 12; // 中午 12 点开始营业
const closeHour = 22; // 晚上 10 点结束营业
// 简单的条件逻辑
if (hour >= openHour && hour <= closeHour) {
alert("We're currently open!");
} else {
alert("Sorry we're closed!");
}
return (
<footer>{new Date().toLocaleDateString()}. We're currently open.</footer>
);
}Alert 行为
你可能会注意到在严格模式下 alert 会出现两次。这是因为 React 在开发模式下会渲染组件两次，以帮助捕获某些类型的 bug。alert 函数也会阻塞页面，这使得它在实际应用中不太实用。
更好的方法
与其使用 alert，我们可以将营业状态存储在一个变量中，并在 JSX 中使用它：
function Footer() {
const hour = new Date().getHours();
const openHour = 12;
const closeHour = 22;
// 将结果存储为布尔值
const isOpen = hour >= openHour && hour <= closeHour;
console.log(isOpen);
return (
<div>
<h2>
我们目前{isOpen ? "正在营业！" : "已经关门。"}
</h2>
{!isOpen && (
<p>我们在 {openHour}:00 开门。到时候再来吧！</p>
)}
</div>
);
}这种方法更好，因为：
- 它不会用 alert 阻塞 UI
- 它将逻辑结果直接集成到渲染的内容中
- 我们可以基于状态有条件地渲染不同的元素
发表回复