Question

编辑1：根据评论，我更改了代码。编辑2：我得到了代码的错误。我想知道我怎么能让它发挥作用？

我想创建一个通用函数来生成样式，如下所示。这是在ES6。

const PADDING = [0, 1, 2, 3, 4];
const MARGIN = [0, 8, 16 ];


const generateStyle = (type) => {
  const styles = {};
  const upperCase = type.toUpperCase();

  upperCase.forEach((item) => {
    styles[`${type}-${item}`] = {
      [type]: `${item}px !important`,
    };
  });
  return styles;
};


generateStyle('padding');

此代码给出以下错误：＆＃34; TypeError：upperCase.forEach不是函数。当我记录大写字母时，其值为“PADDING＆＃39;。

”

但是当我硬编码PADDING而不是大写时，它工作正常。

我做错了什么？

如何使函数通用，以便我也可以使用generateStyle（＆＃39; margin＆＃39;）。

Answer 1

`${type}`.toUpperCase()是字符串"PADDING"，而不是变量PADDING。您需要将这些变量（PADDING和MARGIN）的内容放在可用于按名称查找它们的结构中，如对象：

const values = {
  padding: [0, 1, 2, 3, 4],
  margin: [0, 8, 16],
};

const generateStyle = (type) => {
  const styles = {};

  values[type].forEach((item) => {
    styles[`${type}-${item}`] = {
      [type]: `${item}px !important`,
    };
  });
  return styles;
};


console.log(generateStyle('padding'));

Answer 2

这应该有效：

const PADDING = [0, 1, 2, 3, 4];
const MARGIN = [0, 8, 16 ];

const generateStyles = (array, type) => {
  if(array && array.length) {
  	let styles = {};
    array.forEach(item => {
    	styles[`${type}-${item}`] = {
      	[type]: `${item}px !important`
      }
    })
    return styles
  }
}

console.log(generateStyles(PADDING, "padding"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

您需要做的就是传递一组值（PADDING）和一个css属性名称（“padding”）。

希望它有所帮助！

Answer 3

如果您不想生成结构，您还可以使用eval并迭代变量。

例如。

const PADDING = [0, 1, 2, 3, 4];
const MARGIN = [0, 8, 16 ];


const generateStyle = (type) => {
    const styles = {};
    const upperCase = type.toUpperCase();

    eval(upperCase).forEach((item) => {
        styles[`${type}-${item}`] = {
            [type]: `${item}px !important`,
        };
    });
    return styles;
};


generateStyle('padding');

Answer 4

传递＆＃39;填充＆＃39;对于generateStyle，你只是传递一个字符串而不是数组。所以要传递数组，你只需要传递给PADDING。

Answer 5

因为变量new Vue({ el: '#vue-app', data: { name: 'Shaun', link: 'https://stackoverflow.com' } }); <template> <a href="{{ link }}">This is a link</a> </template>是一个数组，但是当你设置字符串＆＃39; padding＆＃39;函数PADDING的参数foreach将迭代字符串＆＃39; padding＆＃39;，但据我所知，你不能用generateStyle

遍历字符串

Answer 6

变量PADDING不同于函数参数padding，它是一个字符串。

如果你想评估变量使用eval这实际上是邪恶的

const PADDING = [0, 1, 2, 3, 4];
const MARGIN = [0, 8, 16];


const generateStyle = (type) => {
  const styles = {};
  const upperCase = type.toUpperCase();

  eval(upperCase).forEach((item) => {
    styles[`${type}-${item}`] = {
      [type]: `${item}px !important`,
    };
  });
  return styles;
};


console.log(generateStyle('padding'));

无法在函数内获取变量的值

6 个答案: