什么是控制属性？

使用多个 Expandable 组件

我们在上一节中构建的复合组件表现良好。然而，它的可扩展性非常有限。

让我来说明一下我的意思。

假设另一位开发者（我们称之为“用户”）决定使用我们构建的组件，但用法完全不同。

这位用户发现了一些非常有价值的信息，认为值得分享。在他们的应用中，这些信息被存储在一个数组里：

1// 用户的应用
2const information = [
3  {
4    header: '为什么每个人都应该永生',
5    note: '这是高度敏感的信息 ... !!!'
6  },
7  {
8    header: '互联网消失了',
9    note: '我刚刚发现了最大的威胁...'
10  },
11  {
12    header: '关于埃隆·马斯克和火星的真相！',
13    note: '没人告诉你这个...'
14  }
15]

在他们的 App 中，他们遍历信息列表，并渲染我们的 Expandable 组件，其子元素如下所示：

这看起来没什么特别的。

当用户点击任意一个标题时，内容会按设计展开。试着点击任意一个标题，其中一个元素会展开。

同时展开多个标题

但如果再点击另一个标题呢？

结果是，那个标题也会展开。这正是我们 Expandable 组件内部的工作方式。

从上面代码的输出可以看出，两个被点击的标题都展开了它们的内容。不幸的是，这并不是用户期望的行为。

用户真正想要的效果是：同一时间只有一个容器展开。如果用户点击另一个标题，它应该打开，而其他已打开的容器则应关闭。

快速小测验！

---

那么，我们该如何扩展 Expandable 组件，以支持这种使用场景呢？

这时，控制属性模式就派上用场了。请注意，我这里以之前构建的复合组件为例。实际上，你可以将这种功能应用到任何你希望实现的组件中。在下一课中，我们将学习控制属性模式的具体工作原理。