当前位置: 首页 > 知识库问答 >
问题:

我什么时候需要使用super(props)将prop传递给react组件的构造函数?[副本]

翟嘉祥
2023-03-14

很多时候,我们在构造函数中发送道具,但我们从不在构造函数中的任何地方使用。道具,那么为什么需要传递它,以及何时需要传递它。

 class App extends React.Component {

      constructor(props) {
        super(props);    // When do we need to send props to the constructor
        this.state = {
           data: 'Initial data...'
        }
        this.updateState = this.updateState.bind(this);
      };

      updateState(e) {
          this.setState({data: e.target.value});
      }

      render() {
        return (
           <div>
             <input type = "text" value = {this.state.data} 
              onChange = {this.updateState} />
             <h4>{this.state.data}</h4>
          </div>
        );
      }

   }

共有1个答案

任飞鸣
2023-03-14

React.Component构造函数实际上并不需要道具。您可以编写此代码,并且一切正常:

constructor() {
    super();
    this.state = {
       data: 'Initial data...'
    };
    this.updateState = this.updateState.bind(this);
  };

这是因为构造函数路径实际上不是在标准React生命周期中分配道具的位置React.Component实际上不使用道具,只在构造器需要使用时设置this.props。但通常情况下,您不应该在构造函数中使用props,因为使用props初始化状态是一种反模式

如果您已经配置了babel,您甚至不需要像这样的构造函数:

class MyComponent extends React.Component {
    state = { data: "initial data" };

    updateState = (arg1, arg2) => { ... };

    // instead of:
    // updateState(arg1, arg2) { ... }

}
 类似资料:
  • 我知道这个问题被问了很多次,但仍然不清楚。很多人刚才说, 如果您想访问,请将道具传递给构造函数 答案的另一个例子 Oficial doc说类组件应该始终使用props调用基构造函数,但如果我们不将传递给,我们仍然会将放在除构造函数之外的所有地方。 同样从react源代码中,我们可以看到react.Component 但这更让我困惑应使用两个参数调用:和。但是我们调用了super-empty,仍然可

  • 问题内容: 我对JS和React玩的不好。 此处的React文档指出以下内容: 在实现子类的构造函数时,应先调用其他语句。否则, 将在构造函数中未定义,这可能会导致错误。 我的问题是这实际上如何工作?在我的构造函数中神奇启用的功能是什么? 问题答案: 在您提到的文档中。它以javascript的ES6标准编码。 所以这句话 这意味着Greeting是从继承的,通过调用,您实际上是在使用参数调用父元

  • 问题内容: 考虑以下python代码段 我想知道我是如何能够及格,并以相应的基类的构造函数。 问题答案: 好吧,一般而言,在处理多重继承时,您的基类(不幸的是)应该 设计为多重继承 。类和在你的例子都没有,这样的话你找不到适用有道的。 设计基类以进行多重继承的一种常见方法是,中级基类在其方法中接受他们不打算使用的额外的args ,并将它们传递给调用。 这是在python中执行此操作的一种方法: 这

  • 我问这个问题是因为在Python和Java中,如果父类构造函数需要0参数,则不需要调用super()。 Javascript 蟒蛇 Java

  • 问题内容: 我的工厂如下 这是Foo的定义: 好。我不确定如何使用Guice将此参数传递给Foo构造函数? 有任何想法吗? 问题答案: 所有“ Guice构造函数参数”答案在某种程度上似乎都不完整。这是一个完整的解决方案,包括用法: //在实现类上注释构造函数和辅助参数 //使用仅接受辅助参数的create()方法创建工厂接口。 // FooFactory接口没有显式的实现类(Guice Magi

  • 问题内容: 我了解OOP语言(例如C ++)中的构造函数的概念。但是,我不确定何时在REACT中使用构造函数。我确实了解JavaScript是面向对象的,但是我不确定构造器实际上是在“构造”什么。 呈现子组件时,子组件中是否需要构造函数?例如: 为了简洁起见,我将简短示例。但是,为什么需要构造函数?您是否需要在子组件中使用一个构造函数来构造道具? 我的ES6知识很可能还没有达到标准。 问题答案: