在 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 Component
、props
和 state
。
// 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}
}
...
}
我正在创建一个 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 Component
、props
和 state
。
// 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}
}
...
}