访问与数组中的项同名的对象--Javascript

请参阅下面的更新

我有一个具有以下值的数组：

tablet, desktop, widescreen, fullhd

我也有同名的对象。我试图创建一个forEach循环，该循环将使用数组中的不同名称来访问同名对象上的某些属性。大概是这样的：

  ['tablet', 'desktop', 'widescreen', 'fullhd'].forEach(type => {
      css`@media screen and (min-width: ${breakpoints[type]}) {
        color: ${type[color]};
        background-color: ${type[bg]};
      }
    `;
  })}

问题是当我尝试访问类型[color]或类型[bg]时。在本例中，我尝试使用type来引用一个名为tablet或desktop等的对象。但是，我尝试使用字符串tablet、desktop等来引用，但这不起作用

所以，这是我的问题

如何重写代码，以便循环数组的值以访问同名对象上的相关属性

更新

这是我的全部代码。但是，在展示代码之前，我应该注意，在这个特定示例中，我使用的是ReactJS和样式化组件。然而，据我所知，这个问题与React或样式化组件无关——这是一个纯Javascript问题：

首先，断点对象：

const breakpoints = {
  tablet: "769px",
  desktop: "1024px",
  widescreen: "1216px",
  fullhd: "1408px"
};

其次，我根据该对象的关键点创建了一个数组：

const breakpointKeys = Object.keys(breakpoints);

第三，我创建了一个函数，使用该数组尝试访问另一个对象，具体如下：

const gridCSS = ({ bg, color, tablet }) => css`
  background-color: ${bg};
  color: ${color};
  ${breakpointKeys.forEach(key => {
    css`
      @media screen and (min-width: ${breakpoints[key]}) {
        color: ${key[color]};
        background-color: ${key[bg]};
      }
    `;
  })}

第四，我创建了一个使用该函数${gridCSS}的样式化组件：

第五，我创建了一个带有许多道具的React组件，特别是平板电脑和桌面道具：

道具平板电脑和桌面是我试图从我的断点数组访问的对象。

您可以使用eval：

---

我想出了一个有效的解决办法。代码如下：

const gridCSS = ({ bg, textColor, ...props }) => {
  let mediaQueryCSS = breakpointKeys.map(key => {
    let mediaQuery = breakpoints[key].value + breakpoints[key].unit;

    return css`
      @media screen and (min-width: ${mediaQuery}) {
        color: ${props[key] && props[key].textColor};
        background-color: ${props[key] && props[key].bg};
      }
    `;
  });

  return css`
    background-color: ${bg};
    color: ${textColor};
    ${mediaQueryCSS};
  `;
};

从forEach更改为map与样式化组件相关

我认为这样做的原因是，我没有破坏道具对象的道具，而是引用道具，然后引用道具的键，正如“代码狂人”在评论中所指出的那样。这样，我不是用字符串调用对象，而是用字符串调用对象的属性

---

无论哪种方式，它都可以工作。

您应该像下面这样访问该对象的值，对象[type][bg]？您能展示一下您的对象的外观吗？使用eval获取对象怎么样。类似于：让obj=evaltype；e、 g.拥有一个具有这些名称的属性的对象，该对象充当索引。const index={平板电脑、桌面、宽屏、全高清}；索引[类型][颜色]；那么为什么不在数组中加入对象呢？而不是字符串，或者在该数组旁边。这样，传入.forEach回调的索引值就可以用来访问实际对象。${key[color]}无效。向断点对象添加颜色，并使用table:{bp:769px，color:red，…}执行${breakpoints[key].color}等操作

function App() {
  return (
    <Grid
      color="orange"
      bg="lightgreen"

      tablet={{
        color: "green",
        bg: "orange"
      }}

      desktop={{
        color: "yellow",
        bg: "purple"
      }}
    >
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
      </div>
    </Grid>
  );
}

eval(type).color
eval(type).bg

const gridCSS = ({ bg, textColor, ...props }) => {
  let mediaQueryCSS = breakpointKeys.map(key => {
    let mediaQuery = breakpoints[key].value + breakpoints[key].unit;

    return css`
      @media screen and (min-width: ${mediaQuery}) {
        color: ${props[key] && props[key].textColor};
        background-color: ${props[key] && props[key].bg};
      }
    `;
  });

  return css`
    background-color: ${bg};
    color: ${textColor};
    ${mediaQueryCSS};
  `;
};