9、React组件组合、交互与状态管理

React组件组合、交互与状态管理

1. 组件组合

在开发中，我们通常需要将多个小的组件组合成更大的组件。比如，我们有了单个座位（Seat）组件，接下来就需要将多个座位组合成一排（Row），再将多排组合成一个场馆（Venue）。

1.1 调用组件

在React中，从一个组件调用另一个组件通常使用JSX调用，看起来就像HTML标签，组件名在前，属性（props）的写法与HTML属性相同。例如，使用 Seat 组件的语法如下：

<Seat seatNumber={seatNumber} />

这里，标签的第一部分是组件名，然后使用花括号语法给属性赋值。如果传递的是字符串值，也可以使用字符串字面量，如：

<Seat description="front row center" />

1.2 组合一排座位

我们要创建一排座位，而不是单个座位。假设座位号是递增的整数， Row 组件需要为每个座位号创建一个 Seat 组件。以下是 Row 组件的代码：

import * as React from "react"
import Seat from "./seat"

interface RowProps {