在 NavLink 中活动时如何更改图标图像？

Question

在一个 React 项目中，我创建了包含一些链接的菜单，如下图所示，我还更改了链接的背景颜色和激活时的文本颜色，但是，我想更改图标图像，即它将替换激活时的图标图像。那么什么是合适的解决方案呢？

以下是供您参考的代码：

<List>
          {itemList.map((item, index) => {
            return (
              <ListItem
                button
                key={item.text}
                onClick={() => {
                  setData(item.text);
                }}
              >
                <NavLink
                  exact
                  to={item.link}
                  style={{ display: "flex", flexWrap: "wrap" }}
                  activeStyle={{ backgroundColor: "purple", color: "white" }}
                >
                  {item.icon && (
                    <img
                      src={item.icon}
                      style={{ marginRight: "25px" }}
                      height="18px"
                    />
                  )}
                  <ListItemText primary={item.text} />
                </NavLink>
              </ListItem>
            );
          })}
</List>

我尝试过以下代码：

const [newActiveLink, setNewActiveLink] = useState(false)

<NavLink
                exact
                to={item.link}
                style={{ display: "flex", flexWrap: "wrap" }}
                activeStyle={{ backgroundColor: "purple", color: "white" }}
                isActive={(match, location) => match ? setNewActiveLink(true) : setNewActiveLink(false)}
                >
...
{
newActiveLink == true ? {item.icon && (
                    <img
                      src={item.iconWhite}
                      style={{ marginRight: "25px" }}
                      height="18px"
                    />
                  )} : {item.icon && (
                    <img
                      src={item.icon}
                      style={{ marginRight: "25px" }}
                      height="18px"
                    />
                  )}
}
</NavLink>

但是使用isActive时背景颜色会消失

找到此代码框链接：https://codesandbox.io/s/react-material-forked-3uuyg

Answer 1

我认为你很接近，只需要一些调整。

1. 如果当前链接是否处于活动状态，isActive 应该返回一个布尔值，useState 状态更新器函数是 void 返回。
2. 不要使用单个布尔状态值，如果所有图标都使用相同的条件，这将切换所有图标。

代码：

const [newActiveLink, setNewActiveLink] = useState(null);

...

<NavLink
  exact
  to={item.link}
  style={{ display: "flex", flexWrap: "wrap" }}
  activeStyle={{ backgroundColor: "purple", color: "white" }}
  isActive={(match, location) => {
    match && setNewActiveLink(index); // <-- set active index
    return match; // <-- return boolean
  }}
>
  {newActiveLink === index // <-- check active index against current index
    ? item.iconWhite && (
        <img
          src={item.iconWhite}
          style={{ marginRight: "25px" }}
          height="18px"
        />
      )
    : item.icon && (
        <img
          src={item.icon}
          style={{ marginRight: "25px" }}
          height="18px"
        />
      )}
  <ListItemText primary={item.text} />
</NavLink>