React子组件如何接收接口定义外的额外参数？

嘿，我完全懂你遇到的这个坑！React组件的props本质上是一个单一的对象参数，不是你想的那样可以拆成多个独立参数来接收，这就是你报错的核心原因～

你之前尝试把组件写成(mycar: CarInterface, onevar: string)，但React在渲染组件时，会把你传的所有属性（包括...myCar展开的name/year，还有onevar）合并成一个对象传给组件，这个对象自然不符合CarInterface的类型（多了onevar属性），所以TS就抛出类型不兼容的错误了。

下面给你两种常用的解决方式，都能完美解决这个问题：

方式一：扩展接口定义组件Props #

最规范的做法是创建一个新的Props接口，继承原来的CarInterface，再加上你需要的额外参数：

// 在Car.tsx里
import { CarInterface } from './CarInterface';

// 扩展原接口，添加额外参数
interface CarProps extends CarInterface {
  onevar: string;
  // 如果要传函数的话，直接在这里定义函数类型就行
  onCarAction: () => void;
}

export const Car = (props: CarProps) => {
  return (
    <div>
      <div>Car name: {props.name}</div>
      <div>Car year: {props.year}</div>
      <div>Extra variable: {props.onevar}</div>
      <button onClick={props.onCarAction}>触发父组件函数</button>
    </div>
  );
}

然后父组件里正常传参就好了：

// Parent.tsx里
<Car 
  {...myCar} 
  onevar="abcd" 
  onCarAction={() => console.log('来自父组件的函数被调用啦')} 
/>

方式二：用交叉类型直接解构 #

如果不想额外定义新接口，也可以用TS的交叉类型，直接在组件参数里把原接口和额外参数合并：

// Car.tsx里
import { CarInterface } from './CarInterface';

export const Car = ({ 
  name, 
  year, 
  onevar, 
  onCarAction 
}: CarInterface & { 
  onevar: string; 
  onCarAction: () => void;
}) => {
  return (
    <div>
      <div>Car name: {name}</div>
      <div>Car year: {year}</div>
      <div>Extra variable: {onevar}</div>
      <button onClick={onCarAction}>触发父组件函数</button>
    </div>
  );
}

这种写法更简洁，适合参数不多的场景，父组件的调用方式和上面完全一样。

总结一下：React组件永远只接收一个props对象，不管你要传多少参数，都得把它们放进这个对象里，然后通过TS的接口或者交叉类型来约束这个对象的类型，这样就能避免类型错误啦～

备注：内容来源于stack exchange，提问作者oderfla