React 中"parent component"的定义是什么？

const A = () => {
return (
<B>
<C/>
</B>
);
}

父组件的定义是什么

React 是一种在 DOM 中检测变化和执行操作的工具，DOM 基本上是一棵树。React 组件和 JSX 是调用 DOM API 的合成糖。

例如

ReactDOM.render(
React.createElement('div', null, 'Hello World'),
document.getElementById('root')
);

与传递组件作为第一个参数一样有效。

• 组件表示 DOM 的实际元素
• DOM 的元素可以理解为树中的一个节点

因此，父组件/节点可以定义为：

作为任何节点的前身的节点称为父节点。简单来说，从它到任何其他节点都有分支的节点称为父节点。父节点也可以定义为"具有子节点/子节点"。

---

是AC的父母

不。 根据定义，A是父节点，但不是C父节点。出于所有目的，A是C祖父母，因为它是它的前身，但不是它的父级(直接前身)。

A是B的父级，C的父级。

如果要在 DOM 中访问C，则以下语句有效：

A.parentNode.parentNode

---

B是C的家长

吗

是的！

---

B 通过子道具获取 C 的元素。如果 C 是 B 的子项，则 B 应该是 C 的父项。但这实际上应该是这里提到的遏制。

就是这样。在组件实例化内部传递的所有内容都映射到一个特殊的 prop 名称children。containment只是一种奇特的说法，即组件可以从其父级接收任意子组件，并且仍然能够访问它。

const Parent = () => <Child> Arbitrary value or node </Child>;
const Child = ({ children }) => <p> {children} </p>;

children表示在组件标记内传递的所有内容。

至少在 react 文档中，术语parent/child component没有排他性定义，但可以从文档中这些术语的使用中得出定义，这可能是固执己见的。

所以我的定义是： 在层次结构树中，位于相关组件上方的每个组件都与该组件具有祖先关系，因此是父组件。以下所有内容都可以作为直接或间接的孩子。

此外，直接父组件可以通过 props 将信息传递给其直接子组件，并通过上下文传递到其直接和间接子组件。子组件可以相应地从父组件接收信息。

因此：

Is A the parent of C?

是的(我会说直接父母，但这可能会有争议。由于 A 可以将 props 传递给 C，但在层次结构树中，C 将位于 B 下方。A> B> C)

Is B the parent of C?

是的，直系父母。尽管它是一个遏制，但 B 仍然可以通过 B 中的函数调用向 C 提供直接道具children(<propsForCFromB>)

">

Containment"只是 React 中的一个概念，父母在运行时动态接收他们的孩子(而不是预定义的)。换句话说，遏制是父子关系的特例。

您链接的包含部分的第一句话说，"某些组件提前不知道他们的子组件"，然后显示了一个名为FancyBorder的组件通过{props.children}接收任意子组件的示例。孩子的存在意味着某物是它的父级，在这种情况下是FancyBorder.

我不确定 React 中是否有对"父"的铁定定义。 "父"是一个通用的计算机科学术语，用于指代层次结构中紧靠另一个之上的东西。例如，"C：\Program Files\Microsoft Office"是"C：\Program Files\Microsoft Office\Word"的父目录。

接受"子项"的组件

因此，在根据用户的身份验证状态管理渲染组件的高阶组件中，父组件的子组件将是 HoC 返回的组件

const Protected = () => {
const isAuthorised = useAuth();
return isAuthorised ? <Outlet /> : <Login />;
};

这是来自 react-router-dom 如何根据身份验证状态管理渲染组件的代码。<Outlet />只是意味着它是您尝试渲染的初始组件

因此，您可以看到<Outlet />和<Login />组件将是受保护组件的子组件

在你的问题中，我认为 A 是高阶分量，然后 B 是 C 的实际父级

React 中的术语父级通常是指在生成的元素树中高一级的组件(如此问题的其他答案中所述)。

但是，在 React 的本体论中，父子关系和所有者-所有者概念之间也可以进行区分：

在 React 中，每个孩子都有一个"父"和一个"所有者"。所有者是 创建 ReactElement 的组件。即渲染方法 它包含 JSX 或 createElement 调用站点。 (简化反应元素)

在 React 中，所有者是设置其他 props 的组件 组件。更正式地说，如果在组件中创建组件 X Y的render()方法，据说X归Y所有。 (多个组件和所有权)

此外：

<Parent><Child /></Parent>

[A] 家长可以通过访问特殊的 this.props.children 属性来读取其子项。 https://web.archive.org/web/20160310035830/https://facebook.github.io/react/docs/multiple-components.html

基于上面的 React 本体论，可以说：

• A是和的所有者。
• A也是的父级(给定生成的渲染树)
• 就包含而言，>可以被视为的父级。在此方案中，A创建并将其作为参数传递给通过props.children。然后，/> 负责嵌入和渲染，它甚至可以自行决定根本不渲染它。
• 但是，从"渲染树的角度来看"，和之间的实际直接父子关系可能会有所不同，具体取决于B选择嵌入/>的方式。通常，中间会插入其他组件，使/>成为的祖父项。

因此，问题的答案实际上取决于您的观点和应用程序的运行时行为。

有关所有者-所有者概念的更深入信息，您可以参考此堆栈溢出线程。然而，值得注意的是，所有者-拥有者概念在日常 React 编程中的实际意义是有限的，在 XML/HTML 世界中完全不存在。因此，许多程序员在他们通常的开发实践中往往会忽略或忽略这个术语。