Question

我有一个设置，试图使用地图返回一个样式对象。目前，我的设置正在返回对象数组。我不确定我的第一种方法是否是一种有效的方法。

来自服务器的对象需要映射到以下值。

settings = {engine_background: "Gradient", wheel_padding: "100"}

我的React组件中的代码

  const map = {
    engine_background: value => colors[value],
    wheel_padding: value => ({ padding: `${value}px` }),
  };

  const colors = {
    Gradient: {
      background: 'linear-gradient(-80deg, #ffffff, #000000 100%)',
    },
  }; 

 const styles = Object.entries(settings).map(([k, v]) => map[k](v));

顶部的Object.entries（设置）向我返回2个对象的数组。

[{…}, {…}]
0: {background: "linear-gradient(-80deg, #ffffff, #000000 100%)"}
1: {padding: "100px"}

这不完全是我的理想选择，我希望我的Object.entries(settings)将map对象中的所有值返回为一个对象，以便我可以用它们设置组件样式。

示例：

{
  background: "linear-gradient(-80deg, #ffffff, #000000 100%)", 
  padding: "100px",
}

Answer 1

在对象数组上使用reducer创建单个对象：

const styles = Object.entries(settings).map(([k, v]) => map[k](v)).reduce((acc, val) => ({
  ...acc,
  ...val
}), {});

仅提供最终数据样本：

const input = [{background: "linear-gradient(-80deg, #ffffff, #000000 100%)"}, {padding: "100px"}];

console.log(input.reduce((acc, val) => ({
  ...acc,
  ...val
}), {}));

结合js中的地图对象

1 个答案: