如何给child附加多个参数

Question

我有这个 CarInterface.tsx：

export interface CarInterface {name: string;year: string;}

这位家长.tsx：

const [myCar, setMyCar] = useState<CarInterface>({name: "porsche", year: "2010"})
return (
    <div><Car {...myCar} /></div>
)   

还有这辆 Car.tsx：

export const Car = (mycar: CarInterface) => {
    return (
        <div>
            <div>Car name: {mycar.name}</div>
            <div>Car year: {mycar.year}</div>
        </div>
    );
}   

除了界面中的参数之外，如何向 Car 发送更多参数？我尝试以这种方式更改“Car”的签名：

export const Car = (mycar: CarInterface, onevar: string) => {

然后来自 Parent.tsx：

<Car {...myCar} onevar="abcd" />

但是后来我得到了这个错误：

Type '{ onevar: string; name: string; year: string; }' is not assignable to type 'IntrinsicAttributes & CarInterface'.  

我真正想要发送的实际上是从 Parent.tsx 到 Car.tsx 的函数。但为了理解它是如何工作的，我想添加一些其他东西，然后添加接口对象本身。

Answer 1

您可以将多个 props 传递给子组件，然后使用解构或直接访问从子组件中的 props 对象中提取这些属性。

这是家长

import "./styles.css";

import Car from "./Car";
import { useState } from "react";

export interface CarInterface {
  name: string;
  year: string;
}

export default function App() {
  const [myCar, setMyCar] = useState<CarInterface>({
    name: "porsche",
    year: "2010",
  });

  return <Car mycar={myCar} onevar="abcd" />;
}

孩子在这里

export default Car = (props) => {
  const { mycar, onevar } = props;
  return (
    <div>
      <div>Car name: {mycar.name}</div>
      <div>Car year: {mycar.year}</div>
      <div>{onevar}</div>
    </div>
  );
};

这里有道具使用指南 https://react.dev/learn/passing-props-to-a-component

这是一个工作示例https://codesandbox.io/p/sandbox/react-typescript-xlpsg