用useState和onClick变换背景图像

Question

我一直在绕圈子，试图把这件事办好。我的目标是有一个背景图像，显示在链接后，它被点击。“我的导航”上的每个链接都有自己的图像供单击时使用。我遇到的第一个错误是太多的重呈现。我对代码进行了更多的操作，错误消失了，但是图像仍然没有呈现onClick。任何可以提供的帮助都将是非常感谢的，我仍然是非常新的反应，我会喜欢了解我做错了什么。谢谢!

import { Link } from 'react-router-dom'
import { useState } from 'react'
import Logo from '../../assets/images/Platform-Logo.svg'
import artistPaintBackground from '../../assets/images/Navigation-Artists-SVG.svg'
import eventsPaintBackground from '../../assets/images/Navigation-Events.svg'
import contactUsPaintBackground from '../../assets/images/Navigation-Contact-Us.png'
import homePaintBackground from '../../assets/images/Navigation-Home.png'

const navLinks = [
    {
        id: 0,
        title: `HOME`,
        path: `/`,
        bgI: '',
    },
    {
        id: 1,
        title: 'EVENTS',
        path: '/events',
        bgI: '',
    },
    {
        id: 2,
        title: `ARTISTS`,
        path: `/artists`,
        bgI: '',
    },
    {
        id: 3,
        title: `CONTACT US`,
        path: `/contactUs`,
        bgI: '',
    },
]

const Nav = (props) => {
    const [navLinksBackgroundImage, setNavLinksBackgroundImage] = useState({
        navLinks: [
            {
                id: 0,
                title: `HOME`,
                path: `/`,
                bgI: '',
            },
            {
                id: 1,
                title: 'EVENTS',
                path: '/events',
                bgI: '',
            },
            {
                id: 2,
                title: `ARTISTS`,
                path: `/artists`,
                bgI: '',
            },
            {
                id: 3,
                title: 'CONTACT US',
                path: `/contactUs`,
                bgI: '',
            },
        ],
    })

    const css = {
        backgroundImage: `url(${navLinks.bgI})`,
        width: '20%',
        height: '100%',
        backgroundSize: 'cover',
        backgroundRepeat: 'no-repeat',
    }

    const addBgIHandler = () => {
        setNavLinksBackgroundImage({
            navLinks: [
                {
                    id: 0,
                    title: `HOME`,
                    path: `/`,
                    bgI: ` ${homePaintBackground}`,
                },
                {
                    id: 1,
                    title: 'EVENTS',
                    path: '/events',
                    bgI: `${eventsPaintBackground}`,
                },
                {
                    id: 2,
                    title: `ARTISTS`,
                    path: `/artists`,
                    bgI: `${artistPaintBackground}`,
                },
                {
                    id: 3,
                    title: 'CONTACT US',
                    path: `/contactUs`,
                    bgI: `${contactUsPaintBackground}`,
                },
            ],
        })
        if (navLinks.id === 0) {
            return `${homePaintBackground}`
        } else if (navLinks.id === 1) {
            return `${eventsPaintBackground}`
        } else if (navLinks.id === 2) {
            return `${artistPaintBackground}`
        } else if (navLinks.id === 3) {
            return `${contactUsPaintBackground}`
        } else {
            return null
        }
    }

    return (
        <div>
            <AppBar position='static' className={classes.navBar}>
                <Toolbar>
                    <Container maxWidth='xl' className={classes.navDisplayFlex}>
                        <Link to='/'>
                            <img className={classes.imageLogo} src={Logo} />
                        </Link>
                        <Hidden smDown>
                            <ThemeProvider theme={theme}>
                                <List
                                    component='nav'
                                    aria-labelledby='main-navigation'
                                    className={classes.navDisplayFlex}
                                >
                                    {navLinks.map(({ title, path, bgI }) => (
                                        <Link
                                            active={bgI}
                                            to={path}
                                            key={title}
                                            value={bgI}
                                            className={classes.linkText}
                                            onClick={addBgIHandler}
                                            style={css}
                                        >
                                            <ListItem disableGutters={true}>
                                                <ListItemText primary={title} />
                                            </ListItem>
                                        </Link>
                                    ))}
                                </List>
                            </ThemeProvider>
                        </Hidden>
                        <Hidden mdUp>
                            <Dropdown navLinks={navLinks} />
                        </Hidden>
                    </Container>
                </Toolbar>
            </AppBar>
        </div>
    )
}
export default Nav

Answer 1

问题

这段代码中有一些错误。我看到的第一条是这条线：

backgroundImage: `url(${navLinks.bgI})`,

navLinks是一个array，所以它没有bgI属性。数组的各个元素是具有bgI属性的对象。

下一个令人困惑的事情是addBgIHandler函数。此函数调用setNavLinksBackgroundImage并将状态更新为每个链接都有其bgI的映像。然后，它将遍历一堆if/else案例，并返回一个bgI。但是这个返回的值从未在任何地方使用过。

解决方案

通常，您希望以所需的状态存储最小数量的信息。如果某些东西永远不会改变，那么它就不需要处于状态。我们需要知道的唯一变化信息是点击了哪个链接？

我将将您的navLinks数组定义在组件之外，但是要更改它，以便它包括每个图像的bgI。我们想知道每个链接的bgI，但这并不意味着我们将显示bgI。

我们将使用一个状态来告诉我们哪个链接(如果有的话)是活动链接。我正在使用id，但这并不重要。您可以使用title或path代替。

// Should the initial state be home? Or no active link? That's up to you.
const [activeLinkId, setActiveLinkId] = useState(0);

如果是活动链接，我们只会在链接上显示背景图像。与常量的css不同，我们需要使它成为一个函数，这样它就可以针对每个链接而有所不同。我们将从navLinks.map内部调用这个函数，这样我们就可以传递我们需要的参数。我们需要id，以便将其与activeLinkId状态进行比较，如果背景图像处于活动状态，则需要bgI设置背景图像。

我建议您将始终存在于您的width: '20%', height: '100%',对象中的样式classes移到这里，并在这里处理背景图像。

const createCss = (id: number, bgI: string) => {
  if (id === activeLinkId) {
    return {
      backgroundImage: `url(${bgI})`,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat"
    };
  } else return {};
};

在我自己的代码中，我将使用三元算子而不是if/else，但是我希望保持这一点的清晰性和可读性。

在Link中，我们调用函数来设置style支柱。

style={createCss(id, bgI)}

我们的新addBgIHandler非常简单，我们可以内联地定义它。单击此链接时，我们将activeLinkId设置为此id。

onClick={() => setActiveLinkId(id)}

代码

const navLinks = [
  {
    id: 0,
    title: `HOME`,
    path: `/`,
    bgI: ` ${homePaintBackground}`
  },
  {
    id: 1,
    title: "EVENTS",
    path: "/events",
    bgI: `${eventsPaintBackground}`
  },
  {
    id: 2,
    title: `ARTISTS`,
    path: `/artists`,
    bgI: `${artistPaintBackground}`
  },
  {
    id: 3,
    title: "CONTACT US",
    path: `/contactUs`,
    bgI: `${contactUsPaintBackground}`
  }
];

const Nav = (props) => {
  // Should the initial state be home? Or no active link? That's up to you.
  const [activeLinkId, setActiveLinkId] = useState(0);

  const createCss = (id: number, bgI: string) => {
    if (id === activeLinkId) {
      return {
        backgroundImage: `url(${bgI})`,
        backgroundSize: "cover",
        backgroundRepeat: "no-repeat"
      };
    } else return {};
  };

  return (
    <div>
      <AppBar position="static" className={classes.navBar}>
        <Toolbar>
          <Container maxWidth="xl" className={classes.navDisplayFlex}>
            <Link to="/">
              <img className={classes.imageLogo} src={Logo} />
            </Link>
            <Hidden smDown>
              <ThemeProvider theme={theme}>
                <List
                  component="nav"
                  aria-labelledby="main-navigation"
                  className={classes.navDisplayFlex}
                >
                  {navLinks.map(({ title, path, bgI, id }) => (
                    <Link
                      to={path}
                      key={title}
                      className={classes.linkText}
                      onClick={() => setActiveLinkId(id)}
                      style={createCss(id, bgI)}
                    >
                      <ListItem disableGutters={true}>
                        <ListItemText primary={title} />
                      </ListItem>
                    </Link>
                  ))}
                </List>
              </ThemeProvider>
            </Hidden>
            <Hidden mdUp>
              <Dropdown navLinks={navLinks} />
            </Hidden>
          </Container>
        </Toolbar>
      </AppBar>
    </div>
  );
};
export default Nav;

反应路由器

我已经回答了这个问题，就像你提出的一样，那就是“当点击链接时，如何在链接上显示图像？”但是我看到Link组件是从react-router-dom导入的，所以我认为您没有提出正确的问题。问题应该是“如何显示当前页面链接的图像？”这个问题有一个完全不使用状态的不同答案。

您可以将Link组件替换为NavLink。

<Link>的一个特殊版本，它将在与当前URL匹配时向呈现的元素添加样式属性。

这不是我们想要的吗？有了NavLink，我们可以抛弃useState、onClick和createCss。相反，我们将背景样式设置为activeStyle支柱，只有当链接处于活动状态时才会应用这些样式。

{navLinks.map(({ title, path, bgI }) => (
  <NavLink
    to={path}
    key={title}
    className={classes.linkText}
    activeStyle={{
      backgroundImage: `url(${bgI})`,
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat"
    }}
  >