ReactJS: "props"是从哪里来的？

Question

ReactJS: "props"是从哪里来的？

8

我目前正在进行官方的ReactJS教程： https://reactjs.org/tutorial/tutorial.html#passing-data-through-props 我已经喜欢上了ReactJS，尽管我肯定还没有完全理解其中的所有内容。其中之一就是“props”。我熟悉面向对象编程，知道什么是属性，也对继承有至少一些了解。然而，似乎在这里，“props”突然冒出来：

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中尝试面向对象编程时，我会通过在实例化对象时将父对象放入参数中来实现继承，例如：

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

我从未使用“X extends Y”语法，该语法在构造函数中使用super，就像上面的教程代码。然而，在我理解了super()的作用（调用父类的构造函数）之后，我想知道子类构造函数参数中的“props”来自哪里？Oo

在整个教程代码中，从未实例化过任何类的对象，请参见此处：https://codepen.io/gaearon/pen/gWWZgR?editors=0010 因此，我想知道子类构造函数参数如何被填充？Oo

- ForeFather321

如果你的当前类被导入到另一个组件中，并且在该组件中使用了<Square value="something"/>，那么this.props.value将返回一个值！ - Faisal Alvi

但这仍然没有回答我的问题，即构造函数参数中的“props”来自哪里。 - ForeFather321

3个回答

2

"props"并非来自父组件。

它是在子组件类的this.props中设置的。

同时，它也是子组件类构造函数的参数。

如果要在父组件的构造函数中使用可用的“props”，则必须在调用super()时传递它。

像这样：

constructor(props){
    super(props);
}

关于父类：

如果您想定义一个继承自父类的类，请使用以下代码：

class Child extends Parent {

您在代码中使用了以下行：

class Square extends React.Component {

您可以通过Square创建Square2。

class Square2 extends Square {

当您在Square2的构造函数中调用super(props)时，您正在调用Squares的构造函数。

很抱歉我的英语不太好:(

- morteza ataiy

2

您继承的React.Component类（Square extends React.Component）通过继承为您的“Square”类提供props。当声明<Square>组件时，使用包括在xml属性中的这些属性填充了这些props。

例如：如果您将Square组件声明如下： <Square name="foo" size="big" cheese="gorganzola"/>，

react引擎将向您的Square类传递一个props值{name: "foo", size:"big", cheese:"gorganzola"}，使这些值（也称为属性或props）可供您使用。所有这些均发生在Square是一个React组件（Square extends React.Component）的情况下。

- react-newb

谢谢你的解释。现在我知道我们从哪里获取props了。它是从扩展的React.Component继承而来的。我曾经想知道它来自哪里，以及我们如何如此自由地使用它。谢谢。 - Angela Inniss

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

我熟悉面向对象编程（OOP）并知道什么是属性。

React props 不是面向对象的属性。

However, what's setting me of is that seemingly, "props" comes out of nowhere here
constructor(props) {
    ...
}

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

（此处使用 `props` 是个恰当的名称，因为父构造函数将把它的值分配给 `this.props`）

参数的值由调用函数的代码确定，这并没有在您引用的代码中。

继续阅读本教程。您正在学习如何创建一个能够处理传递进来的 `props` 的组件。

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

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

是的，它确实这样做了。只是使用 JSX 语法而已：

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

组件加载时，属性以JSX中的属性传递。