javascript - 在 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 应该返回一个 bool 值，如果当前链接是否应该是事件的，useState 状态更新函数是无效的返回。
2. 不要使用单个 bool 状态值，如果所有图标都使用相同的条件，这将切换所有图标。

代码:

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>