反应路由器属性值

Question

在react路由器官方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 (
            // ...
        )
    }
}

1. 在班级的第一行 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?
   }

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

   previousLocation = this.props.location
   
   componentWillUpdate(nextProps) {...}
   
   render(){...}

Answer 1

因为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
}

对于2.答案是肯定的。更准确：所有都指向当前组件的'props'属性。在构造函数中，原始props从父组件传递。在'componentWillUpdate'中，'props'将在接收更新道具之前成为旧道具。在渲染中是渲染时的“道具”。当您控制日志时，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。