4、React 开发：JSX 代码编写与事件处理全解析

React 开发：JSX 代码编写与事件处理全解析

1. 条件测试的编写方式

在 React 组件中，我们可以使用不同的方式来编写条件测试，以实现动态的用户界面。下面将介绍两种常见的方法。

1.1 使用立即调用的 JavaScript 函数

可以将条件测试集成到一个立即调用的 JavaScript 函数中。以下是 Counter 组件的示例代码：

import { useState, useEffect } from "react";
function Counter({init, end}) {
  init = parseInt(init || 0);
  end = parseInt(end || 0);
  const [count, setCount] = useState(init);
  useEffect(function() {
    if (end && count >= end) return;
    var timer = setInterval(function() {
      setCount((count)=>count+1);
    }, 1000);
    return function() {
      clearInterval(timer);
    }
  });
  return (
    <>
      Initial value of the counter is: {init}
      <br />
      End of the counter