React 快速教程(9):组件的嵌套组合

suiw9 2024-10-23 18:45 26 浏览 0 评论

在 React 中，如果要构建复杂的页面结构或者功能，一般是通过组合的形式来实现的。即将很多个组件通过嵌套包含的关系组合起来，形成更复杂，功能更多的大的组件。

虽然构建组件时，可以是类形式的组件，所以类组件可以继承。但是在通常的场景下，类的继承使得代码的耦合度变大了，不易进行调试，很多细节都是隐式的，为开发和调试带来了不便。而组件之间以组合的形式进行搭配，比较直观，耦合度也较低。

如果嵌套的组件要复用一些功能，可以将这些功能提取出来做成JavaScript模块，然后在这些想要使用这些功能的组件可以直接导入这些模块即可。

Section 1：构建多个组件

以下所有的代码，都撰写在一个文件 combine.js 中

组件 FancyBorder.js

在这个组件里，有一个地方比较特殊，就是 {props.children}。从 props 的特性能够猜想出来，这里应该是接收的外层组件传递进来的 HTML 标签。有 children 这个属性，说明这里的内容就是外层组件的HTML里所包含的那部分。

组件 Dialog.js

<FancyBorder> JSX 标签里的所有内容都会作为一个 children prop 传递给 FancyBorder 组件。

组件 Combine.js

从组件之间的父子关系进行分析：

Combine 组件渲染的是 Dialog 组件，而在 Dialog 组件里，渲染的是 FancyBorder 组件。它们之间的父子关系是 Combine --> Dialog --> FancyBorder
从 FancyBorder 组件里看，{props.children} 这句话，props 指的是它的父组件，然后 children 属性就表示它的父组件 Dialog 的孩子，就是 Dialog 组件里的 <FancyBorder></FancyBorder> 标签里的内容。这些内容（<h1>和<p>）都会被渲染到 FancyBorder 组件中的<div>标签中。
紧接着，在 Combine 组件的 render 方法中，Dialog 是它的子组件。在 Dialog 组件中，{props.children} 这部分就会被 Combine 的 render 里的 <input> 和 <button> 所替换

最终，HTML 的JSX 结构如下图所示：

dialog.js