个人编程学习笔记

Context:传递 props 的另一种方法

Context 让父组件可以为它下面的整个组件树提供数据。Context 有很多种用途。这里就有一个示例。思考一下这个 Heading 组件接收一个 level 参数来决定它标题尺寸的场景

假设你想让相同 Section 中的多个 Heading 具有相同的尺寸

目前,你将 level 参数分别传递给每个 将 level 参数传递给

组件而不是传给 组件看起来更好一些。这样的话你可以强制使同一个 section 中的所有标题都有相同的尺寸:
关于 照片 视频
但是 组件是如何知道离它最近的
的 level 的呢?这需要子组件可以通过某种方式“访问”到组件树中某处在其上层的数据。 你不能只通过 props 来实现它。这就是 context 大显身手的地方。你可以通过以下三个步骤来实现它: 创建 一个 context。(你可以将其命名为 LevelContext, 因为它表示的是标题级别。) 在需要数据的组件内 使用 刚刚创建的 context。(Heading 将会使用 LevelContext。) 在指定数据的组件中 提供 这个 context。 (Section 将会提供 LevelContext。) Context 可以让父节点,甚至是很远的父节点都可以为其内部的整个组件树提供数据。