Question

要直截了当，在一个基于React类的组件中，prop对象是从哪里来的？

我正在关注React井字游戏官方教程。

首先，当我看一下react Component类的代码（我们在创建React组件时对其进行扩展）时，我发现该函数具有3个参数Component(props, context, updater)，但我感到困惑为什么在调用super（）的情况下仅像props这样传递super(props)的原因。是否还应该为context和updater传递值？为什么在不调用super的情况下运行代码时没有错误？

import React, { Component } from "react";

export class Square extends Component
{
    render()
    {
        return (
            <span>
                <button className="square" onClick={ () => { alert("click") } }>
                    {this.props.value}
                </button>
            </span>
        )
    }
}

要清楚一点，我了解value中的{this.props.value}属性来自传递给Square <Square value={index}/>;的属性，该属性是另一个组件中的子元素（{{1 }}（对于React教程），但这不是我要指的。

Answer 1

道具是从Super类传递到您在React中使用extends Components创建的类的属性。

类似于OOPS中将父类属性传递给构造函数中的子代的情况。在React中传递道具的方式类似，这也适用于功能组件

注意-请不要将其与OOPS概念混淆[只是为了给简化版]

Answer 2

一件事情是必要的：父级（即Component类）的构造函数必须在任何React class组件中调用。

super（在Square的{{1}}内部）的作用是用constructor的{{1}}调用Component的构造函数。 （希望它并不复杂）

如果Square有一个props，则应隐式调用Square。
如果constructor没有构造函数，则在使用super时将自动调用Square的构造函数。

此外，您不要在组件中直接使用Component或<Square />。因此，无需在那里定义它们。

在React组件类中，“ props”对象的确切来源是哪里？

2 个答案: