Typescript React - 使用道具的样式化组件条件样式不起作用答案

【问题标题】：Typescript React - Styled component conditional styling using prop not workingTypescript React - 使用道具的样式化组件条件样式不起作用
【发布时间】：2021-12-13 09:20:00
【问题描述】：

我正在尝试使用useState 钩子和样式组件单击时更改按钮的颜色。当我单击按钮时，selected 属性会发生变化，但不会应用颜色。

按钮：

      {toggleFilter.map((item) => {
          return (
            <FilterButton
              key={`${item.name}FilterButton`}
              $selected={item.selected}
              onClick={() => handleToggleFilter(item)}
            >
              {item.name}
            </FilterButton>
          );
        })}

样式化组件：

export const FilterButton = styled.button<{ $selected: boolean }>`
  background-color: ${({ $selected }) => ($selected ? "#a144d5" : "#848485")};
  transition: 0.3s ease-in-out;
  color: white;
  padding: 0.25rem 0.5rem;
  margin: 0.5rem 0.1rem;
  border: none;
`;

处理程序：

    const handleToggleFilter = (item: ToggleFilterItem) => {
      toggleFilter.forEach((i) => {
        if (i.name === item.name) {
          i.selected = !i.selected;
        }
      });
      setToggleFilter(toggleFilter);
  };

【问题讨论】：

标签： reactjs typescript styled-components

【解决方案1】：

你在变异状态，应该把它当成不可变的，试试：

const handleToggleFilter = (item: ToggleFilterItem) => {
  setToggleFilter(
    toggleFilter.map((i) =>
      i.name === item.name ? { ...i, selected: !i.selected } : i
    )
  );
};

【讨论】：