在 ReactJS 中单击按钮时增加 URL 的一部分

Increment a part of URL when a button is clicked in ReactJS

我正在创建一个 Web 应用程序,它基本上是浏览器游戏的图片库。 头像以这种格式存储在游戏中:

https://websitelink.com/avatar/1

https://websitelink.com/avatar/2

https://websitelink.com/avatar/3

所以我想构建 2 个导航按钮,一个会增加计数器以移动到下一张图像,另一个将减少计数器以移动到上一张图像。 我尝试使用 props,但由于 props 是不可变的,所以它不起作用。

我该如何构建此 Web 应用程序?

你可以做到这一点,

const [id,setId]=useState(0);

useEffect(() => {

},[id])

const increment = () => {
    setId(id++);        
}
const decrement = () => {
    setId(id--);        
}


return(
    <button onClick={increment}>Add</button>
    <button onClick={decrement}>remove</button>
    <img url={`https://websitelink.com/avatar/${id}`} />
)

这是最简单的代码,可以帮助您了解 React Componentpropsstate

// parent compoment
import { useState } from "react"

export const GameImageGallery = () => {
    const [num, setNum] = useState(0)
    const increaseDecrease = (state) => {
        if (state === "+") {
            setNum(num + 1)
        }
        if (state === "-") {
            setNum(num - 1)
        }
    }
    return (
        <>
            <button onClick={() => increaseDecrease("-")}>--</button>
            <button onClick={() => increaseDecrease("+")}>++</button>
            <Image url={`https://websitelink.com/avatar/${num}`} />
        </>
    )
}
// child component to show image
const Image = ({ url }) => {
    return <img src={url} alt="image" />
}

useRef 非常适合在组件中持久管理数据。

示例:

import { useRef } from 'react'
...
const App = () => {
    const links = useRef({url1Ctr : 1})
    const onBtnClick = () => {
        links.current = { url1Ctr: links.current.url1Ctr + 1}
    }
    ...
}