React+TypeScript中App()函数重构：组件拆分后无显示及事件处理

一、组件无法显示的核心原因及修复 #

你的代码存在两个关键问题导致页面无内容：

1. App组件缺少return语句
   原App组件直接写了<CounterSection>但没有用return返回JSX，React组件必须返回有效的JSX元素才能渲染。另外CounterSection是未定义的组件，可替换为普通div或自行封装。

   修复后的App.tsx：

   import React from 'react';
   import Counter from "./parts/Counter";
   
   export default function App() {
     return (
       <div className="counter-section">
         <Counter />
       </div>
     );
   }
   

2. Counter组件违反Hooks调用规则
   React Hooks（如useState）必须在组件函数的顶层作用域内调用，你把useState和事件函数定义在了组件外部，导致组件无法正常初始化渲染。

   修复后的Counter/index.tsx：

   import React from 'react';
   import Button from 'react-bootstrap/Button';
   
   const Counter = () => {
     // 状态和事件函数移到组件内部
     const [count, setCount] = React.useState(0);
     
     const minusnum = () => {
       if (count > 0) setCount(count - 1);
     };
     
     const addnum = () => {
       setCount(count + 1);
     };
     
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
       const value = Number(event.target.value);
       // 确保count非负，和减号逻辑保持一致
       setCount(Math.max(0, value));
     };
   
     return (
       <div>
         <Button onClick={minusnum}>minus</Button>
         <Button onClick={addnum}>add</Button>
         <input 
           type="number" 
           min="0" 
           step="5" 
           name="clicks" 
           value={count} 
           onChange={handleInputChange}
         />
       </div>
     );
   };
   
   export default Counter;
   

二、事件逻辑的优化与扩展 #

如果后续需要在App组件或其他模块共享count状态，可采用状态提升方案，将状态放在父组件（App）中，通过props传递给Counter组件：

状态提升版代码 #

App.tsx：

import React, { useState } from 'react';
import Counter from "./parts/Counter";

export default function App() {
  const [count, setCount] = useState(0);
  
  return (
    <div className="counter-section">
      <Counter count={count} setCount={setCount} />
    </div>
  );
}

Counter/index.tsx：

import React from 'react';
import Button from 'react-bootstrap/Button';

// TypeScript定义props类型，确保类型安全
interface CounterProps {
  count: number;
  setCount: React.Dispatch<React.SetStateAction<number>>;
}

const Counter = ({ count, setCount }: CounterProps) => {
  const minusnum = () => {
    if (count > 0) setCount(count - 1);
  };
  
  const addnum = () => {
    setCount(count + 1);
  };
  
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const value = Number(event.target.value);
    setCount(Math.max(0, value));
  };

  return (
    <div>
      <Button onClick={minusnum}>minus</Button>
      <Button onClick={addnum}>add</Button>
      <input 
        type="number" 
        min="0" 
        step="5" 
        name="clicks" 
        value={count} 
        onChange={handleInputChange}
      />
    </div>
  );
};

export default Counter;

这种方式既保持了组件的模块化，又能灵活实现状态共享，适合复杂场景下的组件拆分。

内容的提问来源于stack exchange，提问作者jl121