什么时候传递道具给super()很重要,为什么?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
什么时候传递道具给super()很重要,为什么?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
当前回答
按照源代码
function ReactComponent(props, context) {
this.props = props;
this.context = context;
}
你每次有道具的时候都要传递道具,不要把道具放到这里。手动道具。
其他回答
在React组件中实现constructor()函数时,super()是必需的。请记住,你的MyComponent组件正在扩展或借用React的功能。组件基类。
这个基类有一个自己的constructor()函数,里面有一些代码,用来为我们设置React组件。
当我们在MyComponent类中定义constructor()函数时,实际上是在重写或替换React中的constructor()函数。组件类,但我们仍然需要确保这个constructor()函数中的所有设置代码仍然被调用。
为了确保React。组件的constructor()函数被调用时,我们调用super(props)。Super (props)是父构造函数()函数的引用,仅此而已。
每次在基于类的组件中定义constructor()函数时,都必须添加super(props)。
如果我们不这样做,我们将看到一个错误,说我们必须调用super(props)。
定义这个constructor()函数的全部原因是初始化状态对象。
所以为了初始化我们的state对象,在super调用下面我将写:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
// React says we have to define render()
render() {
return <div>Hello world</div>;
}
};
因此,我们已经定义了constructor()方法,通过创建JavaScript对象初始化了状态对象,将属性或键/值对赋值给它,并将结果赋值给this.state。当然这只是一个例子,所以我并没有给state对象分配一个键/值对,它只是一个空对象。
按照源代码
function ReactComponent(props, context) {
this.props = props;
this.context = context;
}
你每次有道具的时候都要传递道具,不要把道具放到这里。手动道具。
对于react 16.6.3版本,我们使用super(props)来初始化状态元素名称:this.props.name
constructor(props){
super(props);
}
state = {
name:this.props.name
//otherwise not defined
};
Super()用于调用父构造函数。
Super (props)将把道具传递给父构造函数。
从你的例子中,super(props)会调用React。组件构造函数将props作为参数传入。
更多关于super的信息: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super
这里我们不会在构造函数中获取这个,所以它将返回undefined,但是我们可以在构造函数外获取这个
class MyComponent extends React.Component {
constructor() {
console.log(this); // Reference Error i.e return undefined
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
如果我们使用super(),那么我们也可以在构造函数中获取“this”变量
class MyComponent extends React.Component {
constructor() {
super();
console.log(this); // this logged to console
}
render() {
return <div>Hello {this.props.name}</div>;
}
}
当我们使用super();我们可以得到这个,但是这个。Props在构造函数中没有定义。除了构造函数,还有这个。Props不会返回undefined。
如果我们使用super(道具),那么我们可以使用这个。Props在构造函数中的值
苏菲·阿尔珀特的回答
如果你想用这个。构造函数中的道具,需要传递 为超级喝彩。否则,没关系,因为React会设置.props 调用后立即从外部调用实例 构造函数。