#reactjs #redux #jsx #use-state
Вопрос:
Я создаю веб-приложение, которое в основном представляет собой галерею изображений для браузерной игры. Аватары хранятся в игре в таком формате:
https://websitelink.com/avatar/1
https://websitelink.com/avatar/2
https://websitelink.com/avatar/3
Поэтому я хочу создать 2 кнопки навигации, одна из которых увеличит счетчик, чтобы перейти к следующему изображению, а другая уменьшит счетчик, чтобы перейти к предыдущему изображению. Я пытался использовать реквизит, но, поскольку реквизит неизменен, это не сработало.
Как мне подойти к созданию этого веб-приложения?
Комментарии:
1. Пожалуйста, добавьте фрагмент кода, который вы пробовали. Таким образом, другие могут иметь представление о том, что вы сделали неправильно или чего не хватает
Ответ №1:
Вот минимальный код , который может помочь вам разобраться в React Component , props и state .
// parent compoment import { useState } from "react" export const GameImageGallery = () =gt; { const [num, setNum] = useState(0) const increaseDecrease = (state) =gt; { if (state === " ") { setNum(num 1) } if (state === "-") { setNum(num - 1) } } return ( lt;gt; lt;button onClick={() =gt; increaseDecrease("-")}gt;--lt;/buttongt; lt;button onClick={() =gt; increaseDecrease(" ")}gt; lt;/buttongt; lt;Image url={`https://websitelink.com/avatar/${num}`} /gt; lt;/gt; ) } // child component to show image const Image = ({ url }) =gt; { return lt;img src={url} alt="image" /gt; } Ответ №2:
ты можешь сделать это,
const [id,setId]=useState(0); useEffect(() =gt; { },[id]) const increment = () =gt; { setId(id ); } const decrement = () =gt; { setId(id--); } return( lt;button onClick={increment}gt;Addlt;/buttongt; lt;button onClick={decrement}gt;removelt;/buttongt; lt;img url={`https://websitelink.com/avatar/${id}`} /gt; ) Ответ №3:
useRef идеально подходит для постоянного управления данными в компоненте.
Пример:
import { useRef } from 'react' ... const App = () =gt; { const links = useRef({url1Ctr : 1}) const onBtnClick = () =gt; { links.current = { url1Ctr: links.current.url1Ctr 1} } ... }