Question

我有这个javascript文件，其中包含React应用程序的对象中的样式：

const styles = {
  fonts: {
    Georgia: 'Georgia, \'Times New Roman\', Times, serif',
  },
  App: {
    textAlign: 'center',
    fontFamily: this.fonts.Georgia,
  },
};

module.exports = styles;

fontFamily: this.fonts.Georgia会引用App: { fonts: '' }对象，但我想要做的是访问fonts内已定义的styles对象。我怎么能这样做？

有效的是：

const fonts = {
  Georgia: 'Georgia, \'Times New Roman\', Times, serif',
};

const styles = {
  App: {
    textAlign: 'center',
    fontFamily: fonts.Georgia,
  },
};

module.exports = styles;

在这种情况下这是有效的，但上层解决方案会更好。

Answer 1

简单来说，你做不到。 JavaScript对象没有父母的概念。

const App = {
  textAlign: 'center',
  fontFamily: this.fonts.Georgia, // ???
}

this在这种情况下意味着什么？

此外

const styles = {
  fonts: 'Georgia, \'Times New Roman\', Times, serif',
  App
};

这与您发布的第一个对象相同。

您唯一的选择是按原样拆分两个对象。要将此详细信息隐藏在模块外部，您可以执行以下操作：

module.exports = {fonts, styles};

这将使外部可以使用字体和样式。您可以混合和匹配以获得所需的确切对象，但实际结构与问题无关。

Answer 2

一种有效的方法是使用getter动态检索fonts属性。

＆＃13;

const styles = {
  fonts: {
    Georgia: 'Georgia, \'Times New Roman\', Times, serif',
  },
  App: {
    textAlign: 'center',
    get fontFamily () { return styles.fonts.Georgia },
  },
};

console.log(styles);

＆＃13;

请注意，这有一些缺点：

App.fontFamily属性如果动态更改，将始终镜像fonts。这可能是也可能不是理想的行为。
如果没有setter，App.fontFamily只能获取，而不能设置。
某些序列化程序可能无法按预期处理具有非值属性的对象。我想其他一些图书馆也是如此。

同一变量

2 个答案: