Question

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

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

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

是否有一种方法可以使用您定义的颜色分别更改由array.map渲染的块的颜色？

我将Emotion用于JS中的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

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

因此在您的代码中：

background-color: ${colors[colorName]}

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

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

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

1 个答案: