React中使用useState实现按钮计数时页面空白问题求助

问题原因 #

• 违反React Hook规则：useState和handlerClick定义在App组件函数外部。React要求所有Hook必须在组件函数的顶层作用域内调用，外部调用会触发报错，导致页面无法渲染。
• Button组件未处理Props：传递给Button的count和onClick props未被组件接收和使用，即便修复Hook问题，按钮也无法正常展示计数和响应点击。

修正后的代码 #

Button组件（components/button.jsx）

const Button = ({ count, onClick }) => {
    return (
        <button onClick={onClick}>点击次数: {count}</button>
    )
}

export default Button

App组件（App.jsx）

import React from 'react'
import './App.css'
import Button from "./components/button"
import { useState } from "react"

const App = () => {
  // 将Hook和事件处理函数移至组件内部
  const [count, setCount] = useState(0)

  const handlerClick = () => {
      setCount(count + 1)
  }

  return (
    <>
      <Button count={count} onClick={handlerClick}/>
    </>
  )
}

export default App

main.jsx（无需修改）

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

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

修复说明 #

1. 将useState和handlerClick移动到App组件函数内部，符合React Hook的使用规则，解决页面渲染报错问题。
2. Button组件通过解构赋值接收count和onClick props，在按钮元素上绑定点击事件并展示计数，实现预期的计数功能。

内容的提问来源于stack exchange，提问作者Bikra Abna Filqiyast Dzaki