在反应和反应本机的意义上，父组件和子组件是什么意思?

我是 React &React Native的新手，我正在尽我所能好好学习它。在学习过程中，我来到了课程道具和状态，但这里有一件事让我感到困惑，那就是父组件和子组件。

当我们在 React 或React Native中创建组件时，它是这样创建的：

export default class myApp extends React.Component{
render(){
return(
// Do something ...
);
}
}

仅此而已。那么，为什么人们说父组件和子组件等等。React.Component是父组件还是myApp是子组件。父组件和子组件如何通过props 和状态进行通信。请有人用简单的语言和几个例子来解释，我会很高兴的。

谢谢！！！

在 React.js 和 React Native 中，您可以使用组件渲染 UI。假设您要构建一个House组件。但首先，你构建一组不同的组件，你将用作构建块，如Door、Wall和Window组件。然后，您将在House的render函数中使用这些组件来渲染它。此示例中的这些构建基块组件是子组件，House组件是其父组件。

附带说明一下，这个概念最初来自 DOM，尽管您在那里谈论的是节点(父节点等(而不是组件。

React.Component是myApp组件类的父级。

而"父"和"子"仅指 React 组件层次结构。myApp组件是Foo组件的父组件，Foo组件是myApp组件的子组件：

export default class myApp extends React.Component{
state = { foo: true };
render(){
return(
<Foo foo={this.state.foo} />
);
}
}

父组件和子组件可以通过 props 在一个方向上进行通信。父母可以通过道具将某些东西(例如自己的状态(传递给孩子。

正如评论，

在基于组件的体系结构中，您将拥有一个 HOC 来调用您的自定义组件，并在内部调用一些通用组件。因此，对于您的自定义组件，HOC 是将提供道具的父组件。您的组件将保持其状态，并根据提供的 props 和计算状态，将 props 传递给此通用组件，这是一个子组件。

<小时 />

里拉;博士

例：

要求：

您正在尝试创建一个接受 2 个数字并显示其总数的表单。

您需要什么：

将创建 2 个输入字段的表单组件。
将接受值并将其返回给调用方的输入组件。
一个验证器，将检查输入的值是否为数字。
用于显示总计的标签。
用于处理输入的事件。

实现：

您以从头开始的方式从输入组件开始。您不能使用<input type='text'因为它没有自定义验证器。您不能使用<input type='number'因为它会添加微调器。因此，您创建一个使用type="text"的自定义组件并编写自己的验证器

现在对于此组件，其值不能是用户输入的值，因为它可以是 NaN。因此，您需要一个变量来存储处理后的值。您还需要创建此值一次，而不是每次都保留其值。这个地方被称为状态。

现在您有一个输入组件，您需要将其拼接在一起。因此，您可以使用自定义组件创建一个表单，并使用处理程序/函数进行通信。传递给组件的这些函数称为道具。

所以，总而言之，状态是你作为一个组件将持有的东西，而 prop 是你从外部环境(比如某个组件(得到的东西。

现在，在这个组件树中，你称谁为父/子组件？它始终根据上下文引用。所以在上面的例子中，w.r.tCustomInput组件，因为FormComponent调用它，那就是它的父级。同样，它调用的任何组件都将是其子组件。

父/子组件不仅是一种直觉，不仅是反应/反应原生的，而且是所有标记

的一般直觉。我假设您熟悉 html 标签。

<div class='parent'>
<div class='child'></div
</div>

从上面的脚本中div.parent 是div.child 的父标签，反之亦然。

类似地在反应中

export default class myApp extends React.Component{ 
state = { foo: true }; 
render(){ 
return( 
<Foo foo={this.state.foo} /> 
);
}
}

Foo是myApp的孩子，myApp是Foo的父级。

这种直觉在任何标记语言中都是相同的

例：

相关内容

最新更新

热门标签：