什么时候传递道具给super()很重要,为什么?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
什么时候传递道具给super()很重要,为什么?
class MyComponent extends React.Component {
constructor(props) {
super(); // or super(props) ?
}
}
当前回答
这里我们不会在构造函数中获取这个,所以它将返回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 调用后立即从外部调用实例 构造函数。
其他回答
对于react 16.6.3版本,我们使用super(props)来初始化状态元素名称:this.props.name
constructor(props){
super(props);
}
state = {
name:this.props.name
//otherwise not defined
};
按照源代码
function ReactComponent(props, context) {
this.props = props;
this.context = context;
}
你每次有道具的时候都要传递道具,不要把道具放到这里。手动道具。
当你把道具传递给super时,道具被分配给this。看看下面的场景:
constructor(props) {
super();
console.log(this.props) //undefined
}
当你这样做的时候:
constructor(props) {
super(props);
console.log(this.props) //props will get logged.
}
这里我们不会在构造函数中获取这个,所以它将返回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 调用后立即从外部调用实例 构造函数。
只有一个原因需要将props传递给super():
当你想访问这个的时候。构造函数中的道具。
传递:
class MyComponent extends React.Component {
constructor(props) {
super(props)
console.log(this.props)
// -> { icon: 'home', … }
}
}
不通过:
class MyComponent extends React.Component {
constructor(props) {
super()
console.log(this.props)
// -> undefined
// Props parameter is still available
console.log(props)
// -> { icon: 'home', … }
}
render() {
// No difference outside constructor
console.log(this.props)
// -> { icon: 'home', … }
}
}
注意,传递或不传递道具给super对以后的使用没有影响。构造函数外的道具。也就是说,渲染、shouldComponentUpdate或事件处理程序总是可以访问它。
这一点在Sophie Alpert对一个类似问题的回答中得到了明确的表达。
文档-状态和生命周期,向类添加本地状态,第2点建议:
类组件应该总是使用props调用基构造函数。
但是,没有提供理由。我们可以推测,这要么是因为子类化,要么是为了未来的兼容性。
(感谢@MattBrowne提供的链接)