Question

在路由器官方example中，有一个ModalSwitch类，代码如下

class ModalSwitch extends React.Component {

    previousLocation = this.props.location

    componentWillUpdate(nextProps) {
        const {location} = this.props
        if (
            nextProps.history.action !== 'POP' &&
            (!location.state || !location.state.modal)
        ) {
            this.previousLocation = this.props.location
        }
    }

    render() {
        const {location} = this.props
        const isModal = !!(
            location.state &&
            location.state.modal &&
            this.previousLocation !== location
        )
        return (
            // ...
        )
    }
}

在班级的第一行
```
previousLocation = this.props.location
```
为什么previousLocation以这种方式宣布？

我认为我应该在const之前添加previousLocation，但这是错误的，因为会出现语法错误，为什么？
```
const previousLocation = this.props.location // syntax error
```
或者我认为我应该将previousLocation放在constructor函数中但又错了
```
constructor(){
    super();
    this.previousLocation = this.props.location // this.props would be undefined, why?
}
```

第二个问题是：this.props的价值在以下几个地方是否相同？

previousLocation = this.props.location

componentWillUpdate(nextProps) {...}

render(){...}

Answer 1

For 1.因为previousLocation是类的属性，所以不需要const。我认为他们正在使用transform-class-properties插件。见here

ES转换器将转换代码以将属性初始化为类构造函数。

constructor会收到props字典，因此您需要执行以下操作：

constructor(props){
    super(props);
    this.previousLocation = this.props.location // this.props would be assign by super(props), in your code, props is undefined.
    this.previousLocation = props.location
}

For 2.答案是肯定的。更准确：所有人都指向道具＆＃39;当前组件的属性。在构造函数中，原始props从父组件传递。在＆＃39; componentWillUpdate＆＃39;，＆＃39;道具＆＃39;在收到更新道具之前将是旧道具。在渲染中是道具＆＃39;渲染时当您控制日志时，this.props将具有不同的值，但含义相同。

例如：

您有以下代码：

<Component property={this.state.value} />

并且state.value为5.然后constructor将被调用，然后render。 this.props.value将为5.

在父组件中，如果状态已更改：

 setState({value: 6}).

然后会调用componentWillUpdate。 this.props.value是旧道具，值为5，newProps.value为6.然后props将更新，render将被调用。在render中，this.props.value为6.

反应路由器属性值

1 个答案: