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;

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