Question

我是 React 和 React Native 的新手，并尽我所能很好地学习它。在学习过程中，我参加了课程 道具和状态 ，但是这里有一件事使我感到困惑，那就是 父级组件 >和 子组件 。

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

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

就是这样。所以，为什么人们说父项和子项等等。是 React.Component 是父组件，还是 myApp 是子组件。父级和子级组件如何通过道具和状态 进行通信。能有人用一些简单的例子解释一下，我会很高兴的。

谢谢!!!

Answer 1

在React.js和React Native中，您使用组件渲染UI。因此，假设您要构建一个House组件。但是首先，您将构建一组不同的组件，这些组件将用作构建块，例如Door，Wall和Window组件。然后，您将在House的{{1}}函数中使用这些组件进行渲染。在此示例中，这些构建模块组件是子组件，render组件是其父组件。

顺便说一句，这个概念最初来自DOM，尽管您在这里谈论的是节点（父节点等）而不是组件。

Answer 2

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

“父”和“子”仅指React组件层次结构。 myApp component 是Foo 的父级，而Foo component 是{ {1}} 组件：

myApp

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

Answer 3

如所评论，

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

TL; DR

示例：

要求：

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

您需要什么：

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

实施：

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

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

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

总而言之，状态是您作为组件所要持有的东西，而prop是您从外部环境中得到的东西（说某些组件）。

现在，在此组件树中，您将谁称为 parent / child 组件？它总是基于上下文引用。因此，在上述示例中，w.r.t CustomInput组件是由于FormComponent正在调用它，因此它是其父对象。同样，它正在调用的任何组件都将是其子组件。

Answer 4

父/子组件不仅是本机的反应/反应本能，而且总体上都是标记。

我假设您熟悉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的父母。

任何标记语言的直觉都是相同的

从“反应”和“本机反应”的意义上来说，父组件和子组件是什么意思？

4 个答案:

示例：