访问 Object 与数组中的项目同名 — Javascript

Question

请参阅下面的更新

我有一个包含以下值的数组：

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]};
      }
    `;
  })}

问题是当我尝试访问type[color]或type[bg]时。 在这种情况下，我尝试使用type来引用名为tablet或desktop等的 object 。但是，我正在尝试使用字符串tablet 、 desktop等来执行此操作——但这不起作用。

所以，这是我的问题...

如何重写我的代码，以便循环遍历数组的值以访问具有相同名称的对象上的相关属性？

---

更新

这是我的完整代码。 不过，在展示代码之前，我应该注意，在这个特定的示例中，我使用的是 ReactJS 和 Styled Components。 然而，据我所知，这个问题与 React 或 Styled Components 无关——这是一个纯粹的 Javascript 问题：

一、断点object：

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

其次，我根据 object 的键创建了一个数组：

const breakpointKeys = Object.keys(breakpoints);

第三，我创建了一个 function ，它使用该数组来尝试访问另一个 object（更多内容见下文）：

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]};
      }
    `;
  })}

第四，我创建了一个使用 function ( ${gridCSS} ) 的样式化组件：

const Grid = styled.div(
  ({ color, bg, desktop, tablet }) => css`
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  ${gridCSS}
`
);

第五，我创建了一个带有许多道具的 React 组件（注意，特别是tablet和desktop道具）：

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>
  );
}

道具tablet和desktop是我试图从我的breakpointsKeys数组中访问的对象。

Answer 1

我想出了一个可行的解决方案。 这是代码：

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与样式化组件有关。

我认为这行得通的原因是因为我没有破坏props object 的道具，而是引用props ，然后引用props的key （如“代码狂人”的评论中所述。那样，我不是在调用带有字符串的 object ，而是带有字符串的 object 的属性。

无论哪种方式，它都有效。

Answer 2

您可以使用eval() ：

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