React 计数器

app.js

import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
    return (
        <div className="App">
            <Counter />
        </div>
    );
}

export default App;

Counter.js

import React, { useState } from 'react';

function Counter() {
    // 使用useState Hook创建计数状态和更新该状态的函数
    const [count, setCount] = useState(0);

    // 定义一个函数来增加计数
    const increment = () => {
        setCount(count + 1);
    };

    // 定义一个函数来减少计数
    const decrement = () => {
        setCount(count - 1);
    };

    // 渲染计数器UI
    return (
        <div>
            <h1>计数: {count}</h1>
            <button onClick={increment}>加1</button>
            <button onClick={decrement}>减1</button>
        </div>
    );
}

export default Counter;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById('root')
);