技术疑问：‘field1:field2’及downshift中‘inputValue: inputValue2’含义解析

嘿，我来给你拆解这两个问题哈～

这种写法在不同场景下有不同意义，结合你后面提到的downshift代码，重点说最相关的场景：

• 在JavaScript对象解构赋值里，这是变量重命名的语法：意思是把从对象里解构出来的field1变量，在当前作用域里改成用field2这个名字来使用。这是很实用的避免变量名冲突的技巧。
• 当然在其他场景它也可能有别的意思，比如CSS里的属性:值、某些配置文件的键值对格式，但这里咱们聚焦在你问题里关联的JS解构场景就好。

先看你给出的代码片段：

return (<Downshift inputValue={inputValue} onChange={this.handleChange} selectedItem={selectedItem}>
  {({ 
      getInputProps, 
      getItemProps, 
      isOpen, 
      inputValue: inputValue2, 
      selectedItem: selectedItem2, 
      highlightedIndex, 
    }) => (
      // 渲染内容
    )}
</Downshift>
)

这里的inputValue: inputValue2就是刚才说的解构重命名逻辑，具体原因是这样的：

• Downshift组件的render props回调函数会传入一个包含内部状态和方法的对象，其中就有inputValue属性——这是组件自己维护的输入值状态。
• 而你在给Downshift组件传props的时候，已经用了一个自己定义的inputValue变量（就是inputValue={inputValue}里的那个）。如果直接解构inputValue，就会和外层的这个变量重名，导致你没法区分哪个是组件内部的状态，哪个是你自己传入的值。
• 所以用inputValue: inputValue2把组件内部的inputValue重命名为inputValue2，这样在回调函数里，你用inputValue2就能拿到组件内部的输入值，用inputValue还是你自己定义的那个变量，完美避免了命名冲突～

内容的提问来源于stack exchange，提问作者Vincent