React技巧之将对象作为props传递给组件

2022-08-19 15:15:35 浏览数 (1)

原文链接：https://bobbyhadz.com/blog/react-typescript-pass-object-as-props[1]

作者：Borislav Hadzhiev[2]

正文从这开始~

总览

在React TypeScript中将对象作为props传递给组件：

  1. 为对象的类型定义一个接口。
  2. 将一个指定类型的对象传递给子组件，例如：<Employee {...obj} /> 。
代码语言：javascript复制
// App.tsx

interface EmployeeProps {
  name: string;
  age: number;
  country: string;
}

function Employee({name, age, country}: EmployeeProps) {
  return (
    <div>
      <h2>{name}</h2>
      <h2>{age}</h2>
      <h2>{country}</h2>
    </div>
  );
}

export default function App() {
  const obj = {name: 'Alice', age: 29, country: 'Austria'};

  return (
    <div>
      <Employee {...obj} />
    </div>
  );
}

详情

我们使用扩展运算符语法(...)将一个对象的属性作为props传递给一个组件。

EmployeeProps接口表示一个具有3个属性的对象。

思考这个语法的一个简单方法是，我们在预期有0个或更多键值对的地方取出对象的属性。

代码语言：javascript复制
// App.js

const obj2 = {...{a: 1, b: 2}};

console.log(obj2); // 


	


https 网络安全 react typescript 编程算法 




	






	

 0 人点赞