BFE.devAI解答 - React 代码题
1. the React Counter app

以下为React计数器应用程序的代码，可以通过多个方式实现。其中，必须使用useState来存储计数器的值，并使用onClick函数来处理按钮的单击事件，从而增加或减少计数器的值。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <button data-testid="decrement-button" onClick={handleDecrement}>-</button>
      <span data-testid="count">{count}</span>
      <button data-testid="increment-button" onClick={handleIncrement}>+</button>
    </div>
  );
}

export default Counter;

该代码使用useState钩子来创建一个叫做count的状态，它的初始值为0。handleIncrement和handleDecrement函数分别在按下加号和减号按钮时被调用，这两个函数都调用setCount函数来更新count状态的值。页面上的每个按钮都带有一个data-testid属性，这有助于测试你的组件。

在调用该组件时，你可以使用以下代码：

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

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

export default App;

页面上会渲染出计数器应用程序，并包含两个按钮和一个数字。点击加号按钮会增加数字，点击减号按钮会减少数字。