javascript - 在同一个 React 组件 React 的两个特定实例之间共享状态

Question

在你们说全局状态（redux）之前，我想说一件事。我正在通过从 API 获取的数组进行映射。我接收图像并映射它们并渲染我的Slider组件。每 2 个滑块必须共享相同的状态。所以，如果我在第一个滑块中移动到下一张幻灯片，那么第二个滑块也必须转到下一张幻灯片（但不是任何其他幻灯片）。如果我移动到第 5 个滑块中的下一张幻灯片，则第 6 个也必须移动到下一张幻灯片......以此类推。

我在幻灯片上映射的组件：

<div className='image-grid'>
                {screenshots.map((imagesByResolution, resIdx, screenshotResArr) => {
                    return imagesByResolution.map((img, scriptIdx, screenshotScriptsArr) => {
                        return <Slider slides={formattedSlides} />;
                    });
                })}
            </div>

Slider：

import Button from '@material-ui/core/Button';
import MobileStepper from '@material-ui/core/MobileStepper';
import { useTheme } from '@material-ui/core/styles';
import KeyboardArrowLeft from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardArrowRight from '@material-ui/icons/KeyboardArrowRight';
import React from 'react';
import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';
import { encodeImage } from '../services/images';
import useStyles from '../styles/slider';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

export interface ISlide {
    title: string;
    img: ArrayBuffer;
}

interface Props {
    slides: ISlide[];
}

export default function Slider(props: Props) {
    console.log(props);

    const { slides } = props;
    const classes = useStyles();
    const theme = useTheme();

    const [activeSlide, setActiveSlide] = React.useState(0);
    const maxSlides = slides.length;

    const handleNext = () => {
        setActiveSlide((prevActiveStep) => prevActiveStep + 1);
    };

    const handleBack = () => {
        setActiveSlide((prevActiveStep) => prevActiveStep - 1);
    };

    const handleSlideChange = (step: number) => {
        setActiveSlide(step);
    };

    return (
        <div className={classes.root}>
            <div className={classes.header}>
                <h4 className={classes.title}>{slides[activeSlide].title}</h4>
            </div>

            <AutoPlaySwipeableViews
                axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
                index={activeSlide}
                onChangeIndex={handleSlideChange}
                enableMouseEvents
            >
                {slides.map((slide, index) => (
                    <div key={index}>
                        {Math.abs(activeSlide - index) <= 2 ? (
                            <img className={classes.img} src={encodeImage(slide.img, 'image/png')} alt={slide.title} />
                        ) : null}
                    </div>
                ))}
            </AutoPlaySwipeableViews>

            <MobileStepper
                steps={maxSlides}
                position='static'
                variant='text'
                activeStep={activeSlide}
                nextButton={
                    <Button size='small' onClick={handleNext} disabled={activeSlide === maxSlides - 1}>
                        Next
                        {theme.direction === 'rtl' ? <KeyboardArrowLeft /> : <KeyboardArrowRight />}
                    </Button>
                }
                backButton={
                    <Button size='small' onClick={handleBack} disabled={activeSlide === 0}>
                        {theme.direction === 'rtl' ? <KeyboardArrowRight /> : <KeyboardArrowLeft />}
                        Back
                    </Button>
                }
            />
        </div>
    );
}

如果使用某些全局状态管理库或普通的反应状态都无法做到这一点，那么另一种选择是什么？提前致谢！

标签： javascriptreactjsstate