Question

我有一个类别列表。每个类别都有自己的颜色。我想将类别名称作为参考传递给样式组件，并让样式组件将类别作为字符串传递给将字符串映射到适当颜色值的函数。

我们的想法是将类别颜色值放在一个单独的文件中并引用它们。

我现在有这个。

<Container
onClick={playChannel}
category={category}>

const Container = styled.div`
  background: ${colorFromTheme(({ category }) => category)};
`;

const colorFromTheme = val => ({ theme }) => {
  let color = val;
  console.log(val);

  if (Object.keys(theme).includes(val)) {
    color = theme[color];
  }

  return val;
};

这是目前所有通过vals。 Theme是导出的consts的js文件。我收到一个错误，其中val作为一个函数返回。但是，如果我只是在没有条件的情况下返回val，我在Dev Console中看到我传递它的类别的名称会返回。

有什么想法吗？感谢。

Answer 1

只做

<Container onClick={playChannel} background={colorFromTheme(category)}>

和

const Container = styled.div background: ${({background}) => background};

样式组件内部的函数传递变量

1 个答案: