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

Question

以下演示使用 array.map 渲染三个块。

颜色的名称在 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]};

颜色是一个对象。 colorName => color

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

因此在您的代码中：

background-color: ${colors[colorName]}

或（因为您将颜色名称命名为 item）

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

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

React.js: Is there a way to apply a separate style to a component to be rendered in array.map?

javascript

css

emotion

reactjs