Question

我可以在对象文字中添加一些字符串吗？

如果我height: 'calc(100% - ' + String(this.padding) + 'px * 2)'，则Chrome会向我显示以下错误消息。

[ProjectContainer.js：15]未捕获的TypeError：无法读取属性＆＃39;填充＆＃39;未定义的

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,
        height: 'calc(100% - ' + String(this.padding) + 'px * 2)',
        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }
}

但是，如果我将其设为函数，则不会显示任何错误消息，但css似乎无法正常工作。这可能是因为内联式系统不会将其称为函数而是变量。

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,
        height: function() {return 'calc(100% - ' + String(this.padding) + 'px * 2)'},
        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }
}

将身高设为'calc(100% - 10px * 2)'的最佳方式是什么？

Answer 1

如评论中所述，在定义对象文字时，不能使用this来引用对象文字。相反，它将引用当前代码范围中的全局this或this。基本上，在您仍然定义对象文字时，不能使用对象文字的属性，之后需要这样做：

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,
        height: '',                     // Optional
        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }
}

styles.root.height = 'calc(100% - ' + String(styles.root.padding) + 'px * 2)';

console.log(styles);

Answer 2

你可以试试这个

var styles = {
    root: {
        display: 'flex',
        flexWrap: 'wrap',
        textAlign: 'left',
        padding: 10,

        width: 'calc(100% - 10px * 2)',
        overflowY: 'scroll'
    }, 
    init: function() {
       this.root.height = 'calc(100% - ' + String(this.root.padding) + 'px * 2)';
       delete this.init; 
       return this;
    },
}.init()

Answer 3

你可以这样做：

var styles = (function() {
  var padding = '10';
  return {
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      textAlign: 'left',
      padding: +padding,
      height: 'calc(100% - ' + padding + 'px * 2)',
      width: 'calc(100% - 10px * 2)',
      overflowY: 'scroll'
   }
})();

这使用了几种有趣的Javascript技术，例如：

立即调用函数表达式（IIFE）
unary plus operator将字符串'10'强制转换为数字

这样做不仅可以在单个表达式中完成，而且更易于阅读和理解。

您可以修改它，以便填充值可以从外部传入，几乎没有新工作：

var styles = (function(padding) {
  var padding = padding ? padding : '10';
  return {
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      textAlign: 'left',
      padding: +padding,
      height: 'calc(100% - ' + padding + 'px * 2)',
      width: 'calc(100% - 10px * 2)',
      overflowY: 'scroll'
   }
})(padding);

Answer 4

在声明期间，您无法在对象文字中使用this来正确引用。 JavaScript中的this用于函数范围。

下面的示例显示了您的问题的可能解决方案。您基本上在函数范围中定义padding并在对象文字声明中检索它。

在大多数情况下，其值取决于函数的大小调用。它不能在执行期间通过赋值来设置，它可能是每次调用函数时都不同。 More info on this here

＆＃13;

function foo() {
 this.padding = 10; // declare it only once

  var styles = {
    root: {
      display: 'flex',
      flexWrap: 'wrap',
      textAlign: 'left',
      padding: this.padding,
      height: 'calc(100% - ' + String(this.padding) + 'px * 2)',
      width: 'calc(100% - 10px * 2)',
      overflowY: 'scroll'
    }
  };

  console.log(styles.root);

};

foo();

＆＃13;

在Object Literal中进行字符串添加的方法

4 个答案: