Question

我有一个对象，我需要返回每个对象以检查其映射结果。我下面的代码存在问题在这行上

style: { ...map[settings] },

我需要一种方法来检查每个设置并将其传递给地图。不知道如何在es6中采用最有效的方法？

这是已传递到PassThrough组件中的设置的值

const settings = {
  block_background: GradientGreen,
  block_spacing: padding,
};

这是我的组件

const PassThrough = ({ children, settings }) => {
  const map = {
    GradientGreen: {
      background: 'linear-gradient(-95deg, green, blue 100%)',
    },
    padding: '20px',
  };

  const cloneChild = () => {
    return cloneElement(children, {
      style: { ...map[settings] },
    });
  };

  return (
    <Fragment>
      {cloneChild()}
    <Fragment/>
  );
};

Answer 1

最短的可能是：

 inlineStyle: Object.assign({}, ...Object.entries(settings).map(([k, v]) => ({ [k]: map[v] })))

但实际上我会将settings更改为：

const settings = original => {
 block_background: original.GradientGreen,
 block_spacing: original.padding,
};

然后就是：

inlineStlye: settings(map)

如何将js中的一堆对象映射到另一个对象

1 个答案: