Question

我目前正在做官方的reactJS教程： https://reactjs.org/tutorial/tutorial.html#passing-data-through-props

我已经很喜欢reactJS，尽管我绝对还不了解发生的一切。其中之一就是“道具”。我熟悉OOP，并且知道什么是属性。我对继承也至少有一些了解。但是，让我感到惊讶的是，“道具”似乎从这里冒出来：

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button className="square" onClick={() => alert('click')}>
        {this.props.value}
      </button>
    );
  }
}

通常，当我在Javascript中乱搞OOP时，我通过在实例化对象时将父对象放入参数来使类继承，例如：

var ParentObjectInstance = new ParentObject()
var ChildObjectInstance = new ChildObject(ParentObjectInstance)

我从未使用过“ X扩展Y”语法，该语法在构造函数内部使用了super，就像上面的教程代码一样。但是，在了解了super（）的作用（调用父级的构造函数）之后，我想知道childs构造函数参数中的“ props”来自何处？哦

在整个教程代码中，从未从类中实例化任何对象，请参见此处： https://codepen.io/gaearon/pen/gWWZgR?editors=0010

因此，我想知道childs构造函数的参数如何填充？哦

Answer 1

我熟悉OOP，并且知道什么属性。

反应道具不是OO属性。

但是，让我大吃一惊的是，“道具”似乎无处不在
constructor(props) {
    ...
}

您正在定义一个函数。 props是第一个参数的名称。与往常一样，您可以随意命名一个参数。

（{props在这里是一个明智的名称，因为超级构造函数稍后会将其值分配给this.props）。

参数值由调用函数的代码确定，该代码不在您引用的代码中。

请继续阅读本教程。您正在讨论的部分将说明如何制作可以通过传递的props做某事的组件。

稍后将向您展示如何使用该组件。

在整个教程代码中，从未从类中实例化任何对象

是的。它只是使用JSX语法来做到这一点：

renderSquare(i) {
    return <Square value={i} />;
}

道具在加载组件的JSX中作为属性传递。

Answer 2

您继承的 React.Component 类（Square 扩展了 React.Component）通过继承向您的“Square”类提供道具。这些道具使用声明组件时包含的 xml 属性填充。

例如：如果您按如下方式声明 Square 组件： ,

反应引擎会将 {name: "foo", size:"big", cheese:"gorganzola"} 的 props 值传递给您的 Square 类，使这些值（也称为属性或道具）可供您使用使用。这一切都会发生，因为 Square 是一个 React 组件（Square 扩展了 React.Component）。

Answer 3

“道具”不是来自父母。

它已设置在儿童班级的this.props中

它也是孩子类的构造函数参数。

对于父级构造函数中的可用“ props”，必须在构造函数中调用super（）时将其发送。

赞：

constructor(props){
    super(props);
}

关于父母：

如果您想定义班级居住父母，请使用以下方法：

class Child extends Parent {

您已在代码中使用以下行

class Square extends React.Component {

您可以从Square创建Square2

class Square2 extends Square {

，然后在Square2s构造函数中调用super（props）时，您正在调用Squares构造函数。

对不起，我的英语不好:(

ReactJS：“道具”来自哪里？

3 个答案: