лайтбокс с reactjs с использованием jsx

Question

Я пытаюсь использовать этот лайтбокс в reactjs https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow_gallery. Но, похоже, это не работает для меня в reactjs. У меня проблема с объявлениями функций onclick. Вот мой код:

Я также попытался объявить скрипт в componentDidMount. Но, похоже, это не работает. Как я могу это исправить?

Answer 1

Вы не должны получать доступ к DOM в React. Но вы должны создать модель вашего компонента в состоянии и сопоставить ее с view в render () function

UPD :

Код может выглядеть следующим образом

const useSlider = (items) => {
    const [pointer, setPointer] = useState(0)

    useEffect(() => {
        setPointer(0) // reset pointer if items list changes
    }, [items])

    // Move pointer forvard
    const next = () => setPointer((pointer) =>
        pointer < items.length - 1 ? pointer + 1 : 0
    );

    // Move Pointer back
    const prev = () => setPointer((pointer) =>
        pointer > 0 ? pointer - 1 : items.length - 1
    );

    // Focused item
    const item = useState (() => items[pointer], [items, pointer])

    return {
        pointer,
        next,
        prev,
        setPointer,
        item,
    }
}


const Slider = ({ items }) => {
    const { next, prev, pointer, setPointer, item } = useSlider(items);

    return (
        <div>
            <div className="container">
                <div className="mySlides">
                    <div className="numbertext">{`${pointer + 1} / ${items.length}`}</div>
                    <img src={item.src} style="width:100%" />
                </div>
                <a className="prev" onClick={prev}>❮</a>
                <a className="next" onClick={next}>❯</a>

                <div className="caption-container">
                    <p id="caption">{item.caption}</p>
                </div>

                <div className="row">
                    {
                        items.map((item, pointer) => (
                            <div key={pointer} className="column">
                                <img
                                    className="demo cursor"
                                    src={item.src}
                                    style="width:100%"
                                    onClick={() => setPointer(pointer)}
                                    alt={item.caption}
                                />
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    );
}

const items = [{
    src: 'img_woods.jpg',
    caption: 'The Woods'
}, {
    src: 'img_5terre.jpg',
    caption: 'Cinque Terre'
}];
// <Slider items={items}/>