React中如何向主App组件传递groupId值并解决TypeScript类型报错

React 函数组件的第一个入参永远是包含所有外部传入属性的props集合对象。你在代码里把App组件的入参类型直接声明为string，但实际从index.tsx传进来的内容是{ groupId: string }结构的对象，二者类型完全不匹配，所以触发TS编译报错。

你在index.tsx中从DOM节点读取data-group-id属性、将值传递给App的逻辑没有问题，不需要调整，只需要修改组件内部的入参接收逻辑即可。

1. 调整App组件的入参接收逻辑，从props对象中解构取出groupId值，同时为props补充明确的TS类型定义，避免后续类型校验异常。
   修改后的App.tsx完整代码：

   import React from "react";
   import { Box } from "./components/Box";
   import styles from './scss/App.module.scss';
   
   // 定义App组件可接收的props类型
   interface AppProps {
     groupId: string;
   }
   
   // 从props对象中解构出groupId，而非直接把入参当作groupId本身
   function App({ groupId }: AppProps) {
       return (
           <div className={ styles.orchestratorUi }>
             <Box groupId={ groupId } />
           </div>
       );
   }
   
   export default App;
   

2. 同步检查Box组件的入参定义逻辑，避免出现同类错误：不要把Box的入参直接声明为string类型，要同样按照props对象解构的方式接收groupId，补充对应的props类型定义。示例参考：

   interface BoxProps {
     groupId: string;
   }
   
   function Box({ groupId }: BoxProps) {
     // 内部业务逻辑
   }
   

很多刚接触React函数组件的开发者容易混淆普通函数和React组件的入参逻辑：普通函数会按传参顺序接收独立的参数值，但React组件不会拆分传入的属性，所有外部传入的属性都会被统一打包为一个props对象，作为唯一入参传递给组件，不会单独把某个属性值拆出来当独立参数传。

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