Доступ к объекту с тем же именем, что и у элемента в массиве - 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 и т. Д. Однако я пытаюсь сделать это, используя строки tablet, desktop и т. Д. -- и это не работает.

Итак, вот мой вопрос ...

Как я могу переписать свой код, чтобы я мог перебирать значения массива для доступа к соответствующим свойствамна моих объектах с таким же именем?

---

ОБНОВЛЕНИЕ

Вот мой полный код.Прежде чем я покажу код, я должен отметить, что в этом конкретном примере я использую ReactJS и Styled Components.Однако, насколько я знаю, вопрос не имеет ничего общего ни с React, ни с Styled Components - это чисто вопрос 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]};
      }
    `;
  })}

В-четвертых, я создаю Styled Component, который использует эту функцию (${gridCSS}):

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

В-пятых, я создаю React Component с несколькими подпорками (обратите внимание, в частности, на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, я вместо этого ссылаюсь на props, а затем ссылаюсь key на props (как отмечено в комментариях).«Maniac Code». Таким образом, я не вызываю объект со строкой, а скорее свойство от объекта со строкой.

В любом случае, это работает.

Answer 2

Вы можете использовать eval():

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