Question

我已经看到许多代码段，例如HelloWorld，其中props被传递给super()。在构造函数中未访问this.props 时，这样做的原因是什么？

class HelloWorld extends Component {
    constructor(props) {
        super(props);

        this.state = { message: 'Hi' };
        this.logMessage = this.logMessage.bind(this);
    }

    logMessage() {
        console.log(this.state.message);
    }

    render() {
        return (
            <input type="button" value="Log" onClick={this.logMessage} />
        );
    }
}

Answer 1

React组件的构造器在安装之前被调用。在为React组件子类实现构造函数时，应在其他任何语句之前调用{ "status": 1, "description": "Success", "qr_data": "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" }。否则，#include <iostream> #include <fstream> #include <cstdlib> #include <string> #include <algorithm> #include <iterator> using namespace std; string fileName; int num, counter = 0; int main(){ cout << "Enter input file name: "; cin >> fileName; ifstream in_file; in_file.open(fileName); while(in_file >> num){ counter = counter+1; } in_file.clear(); //clear the eof flag after reaching end of file in_file.seekg (0, ios::beg); //go back to the start of the file to read int arrayNumbers[counter]; for (int i = 0; i < counter; ++i){ in_file >> arrayNumbers[i]; } in_file.close(); sort(arrayNumbers, arrayNumbers+counter); cout << "Min: " << arrayNumbers[0] << endl << "Max: " << arrayNumbers[counter-1]; }将在构造函数中未定义，这可能会导致错误。

阅读Here了解更多详细信息。

Answer 2

如果您不打算在构造函数中使用this.props，则不必像这样将其放入super()中：

constructor(){
   super();
   this.state = { randomState: "" };
   this.randomProperty = null;
}

但是，在某些情况下，可以访问从父组件传递的props并将其用于构造函数内部以初始化状态（这些道具不受道具更改的影响）。通过将props传递给super，您现在可以在构造函数中使用this.props。

constructor(props){
   super(props);
   this.state = { randomVar: props.initialValue, propDependentState: this.props.someValue };
   this.someVar = props.defaultValue;
   this.anotherVar = this.props.openToChangesProp;
}

请注意，那些直接传递给此组件的props是构造函数唯一可访问的道具。使用Redux props从状态映射的connect包含在道具中，由于尚未安装组件，因此无法在此处访问它们。

Answer 3

您不必执行super(props)。仅在构造函数内部访问props时才这样做。您可以编写：

constructor(){
 super()
 this.state={}
}

如果您未通过super(props)：

 constructor(props){
  super()
  console.log('this.props', this.props); // => undefined
  console.log('props', props); // => whatever the props is
 }

引用this stackoverflow answer

当在prop构造函数内未访问prop时，将prop传递给super（）的原因是什么？

3 个答案: