React.js：有没有办法将单独的样式应用于要在 array.map 中呈现的组件？

Question

下面的demo使用array.map来渲染三个块。

demo(CodeSandBox)

颜色的名称在Colors.tsx中定义。

export default {
  foo: "#ff6347",
  bar: "#4682b4",
  baz: "#90ee90"
};

有没有办法使用您定义的颜色单独更改由 array.map 渲染的块的颜色？

我在 JS 中使用 Emotion 作为 CSS。

---

下面是完整的代码。

/** @jsx jsx */
import { jsx, css } from "@emotion/core";
import colors from "./Colors";

export default function App() {
  const colorName = ["foo", "bar", "baz"];
  const Block = colorName.map((item, index) => {
    const blockStyle = css`
    ${baseStyle}
    background-color: ${colors.foo}; // ${colors.item} did not work.
  `;
    return (
      <li key={index}>
        <span>{item}</span>
        <div css={blockStyle} />
      </li>
    );
  });

  return <ul>{Block}</ul>;
}

const baseStyle = css`
  width: 100px;
  height: 100px;
`;

Answer 1

tldr

background-color: ${colors[item]};

---

colors 是一个对象。 colorName => color

要通过 colorName 访问颜色，您可以使用 colors[colorName]

因此在您的代码中：

background-color: ${colors[colorName]}

或（因为您将 colorName 命名为 item）

background-color: ${colors[item]};