React TypeScript中如何从函数返回函数组件（解决类型报错）

错误核心原因分析 #

你的代码存在三个关键问题，共同导致了该错误：

1. 按钮点击事件误用：handleBoxCard是按钮的onClick回调，这类函数的返回值用于控制是否阻止默认行为，而非渲染组件。React要求组件渲染逻辑必须放在组件的return语句中，通过状态控制显示。
2. Props参数不匹配：BoxCard定义的props接口接收bookingCode属性，但你调用时传的是boxCode，参数名不匹配。
3. 状态更新逻辑错误：定义的状态变量是bookingCode，却误用了setBoxCode；同时循环调用setBookingCode会导致多次状态更新，最终仅保留最后一次的值。

分步修正代码 #

1. 修正BoxCard.tsx

调整props接口命名，明确类型，并使用解构接收props：

import React, { useState } from "react";

// 更清晰的props接口命名
interface BoxCardProps {
  bookingCode: string;
}

function BoxCard({ bookingCode }: BoxCardProps) {
  // 给useState添加明确的类型声明
  const [test, setTest] = useState<null | string>(null);

  return <div>{bookingCode}</div>;
}

export default BoxCard;

2. 修正MainComponent.tsx

通过状态控制组件显示，修复状态更新逻辑，阻止按钮默认行为：

import React, { useState, useCallback } from "react";
import BoxCard from "./Boxcard";

export const MainComponent = () => {
  // 给选中行数组添加类型，明确元素结构
  const [selectedRows, setSelectedRows] = useState<Array<{ boxCode: string }>>([]);
  const [bookingCode, setBookingCode] = useState<string>("");
  // 新增状态，控制BoxCard的显示/隐藏
  const [showBoxCard, setShowBoxCard] = useState<boolean>(false);

  const handleRowSelected = useCallback((state: { selectedRows: typeof selectedRows }) => {
    setSelectedRows(state.selectedRows);
  }, []);

  const handleBoxCard = (e: React.MouseEvent<HTMLButtonElement>) => {
    // 阻止按钮默认的表单提交行为
    e.preventDefault();
    
    // 处理选中行，这里取第一个选中行的boxCode（可根据需求调整）
    if (selectedRows.length > 0) {
      setBookingCode(selectedRows[0].boxCode);
    }
    // 切换状态，显示BoxCard
    setShowBoxCard(true);
  };

  return (
    <>
      <form>
        <button value="Open Component" onClick={handleBoxCard} />
        {/* 根据状态条件渲染BoxCard */}
        {showBoxCard && <BoxCard bookingCode={bookingCode} />}
      </form>
    </>
  );
};

关键修正点说明 #

• 用状态控制渲染：新增showBoxCard布尔状态，在组件的return中通过条件判断渲染BoxCard，这是React中控制组件显示的标准方式。
• 修正参数匹配：调用BoxCard时传入正确的bookingCode属性，与组件的props接口一致。
• 修复状态更新：将setBoxCode改为setBookingCode，并避免循环调用状态更新函数，直接取目标值更新。
• 阻止默认行为：在点击事件中调用e.preventDefault()，防止按钮触发表单提交导致页面刷新。

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