React组件中如何为对象属性设默认值且保留原对象内属性引用？

我明白你的需求了——你想给settings.rotation设置默认值360，但又不想破坏settings对象的整体引用，毕竟里面还有其他未展示的属性，而且你希望能直接通过settings.rotation来访问这个值对吧？

先说说你之前写法的问题：你把rotation单独解构出来命名为settingsRotation，剩下的settings对象其实已经剔除了rotation属性，自然没法通过settings.rotation访问到默认值了。

下面给你两种符合需求的解决方案：

方案1：函数内部合并默认值（直观易读） #

这种方式在函数里创建一个合并了默认值的新settings对象，既保留原对象的所有属性，又给rotation补上默认值：

export interface MapSettings { 
  up: 'trueNorth' | 'runIn' | 'magneticNorth' | 'user'; 
  rotation?: number; 
}
type MapProps = { settings: MapSettings; };
export const Map: FunctionComponent<MapProps> = function Map({ settings }) {
  // 仅当rotation为null/undefined时，使用默认值360（用??比||更严谨，避免0被误判）
  const mergedSettings = {
    ...settings,
    rotation: settings.rotation ?? 360
  };

  // 之后直接用mergedSettings访问所有属性，包括带默认值的rotation
  console.log(mergedSettings.rotation);
  console.log(mergedSettings.up); // 其他属性不受影响
};

方案2：参数解构后重组settings（参数层面处理） #

如果你想在参数解构阶段就处理默认值，可以先把rotation单独解构出来设默认，再和其他属性重组回完整的settings对象：

export const Map: FunctionComponent<MapProps> = function Map({ settings: { rotation = 360, ...restOfSettings } }) {
  // 把解构出来的rotation和剩余属性重新组合成完整的settings
  const settings = { ...restOfSettings, rotation };

  // 现在就能正常用settings.rotation访问默认值，其他属性也都保留
  console.log(settings.rotation);
};

两种方案都能满足你“保留settings对象引用，直接用settings.rotation访问默认值”的需求，你可以根据自己的代码习惯选择。

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