在React + TS中,要获得所有儿童的身高,可以通过以下步骤实现:
以下是一个示例代码:
// 儿童组件 Child.tsx
import React from 'react';
type ChildProps = {
height: number;
};
const Child: React.FC<ChildProps> = ({ height }) => {
return <div>儿童身高:{height}cm</div>;
};
export default Child;
// 父组件 Parent.tsx
import React from 'react';
import Child from './Child';
type ChildData = {
id: number;
height: number;
};
const childrenData: ChildData[] = [
{ id: 1, height: 120 },
{ id: 2, height: 130 },
{ id: 3, height: 115 },
// 其他儿童的数据
];
const Parent: React.FC = () => {
const childrenHeights = childrenData.map((child) => child.height);
return (
<div>
{childrenData.map((child) => (
<Child key={child.id} height={child.height} />
))}
<div>所有儿童的身高:{childrenHeights.join('cm, ')}cm</div>
</div>
);
};
export default Parent;
以上代码中,我们创建了一个儿童组件Child
,该组件接收一个height
属性,用于显示儿童的身高。在父组件Parent
中,我们定义了一个儿童数据集合childrenData
,并将每个儿童的身高传递给Child
组件进行渲染。最后,使用map
函数将所有儿童的身高存储在childrenHeights
数组中,并显示在页面上。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云