React新手学习React Hooks – useState技巧

使用React Hooks的useState来创建一个简单的计数器应用程序,以便产生输出。

创建项目

$ npx create-react-app hooks-tutorial --template typescript

创建Counter.tsx

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState<number>(0);
  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount((prev) => prev + 1)}>+</button>
      <br />
      <button onClick={() => setCount((prev) => 0)}>RESET</button>
    </>
  );
};

export default Counter;

将App.tsx导入到文件中。

import React from 'react';
import Counter from './components/Counter';

const App: React.FC = () => {
  return (
    <div className="App">
      <Counter />
    </div>
  );
};

export default App;

计数器应用完成。

スクリーンショット 2023-02-11 16.34.10.png
广告
将在 10 秒后关闭
bannerAds