反应如何改变带有样式组件的按钮背景

Question

我对我的应用程序实现了按类别过滤，所以如果你点击按钮，它就会过滤出指定的类别。我还想改变按钮的背景颜色，当用户点击它时，这样你就可以直观地看到哪个类别被选中了。

我正在使用样式化组件来设置样式，但是我不能访问样式化组件中的状态，所以我不知道如果它被点击或者没有被点击，我可以比较什么。

我通过样式化组件中的道具来尝试它，但它对我不起作用。所以问题是，当按钮处于活动状态时，更改按钮背景的最简单方法是什么。

代码在这里：https://codesandbox.io/s/currying-flower-nui32?file=/src/App.js

Answer 1

您不能将key用作道具，因为它是由react内部使用的。

你可以简单地设置另一个道具并参考它，它就会起作用：

<StyledButton
  category={category}
  buttonCategory={item} //new prop
  key={item}
  onClick={() => {
    setCategory(item);
  }}
>

然后更新你的三元组：

prop.buttonCategory === prop.category ? "#23d997" : null;