如何将状态传递给路由器渲染的组件

Question

我正在制作一个 React 作品集，其中一个组件将是一个图片库（不用说我是 React 的新手，我想知道，或者我不会问这个问题）。为此，我将使用一个包（react-image-gallery），它允许我自定义多个项目。我已经安装了，它运行良好，但我需要自定义它 - 隐藏缩略图以及“播放”和“全屏”按钮。

根据文档，可以通过状态来实现。问题是我没有这样做，因为应用程序的导航使用了路由器，虽然我很努力，但我无法让状态传递到放置在路由器上的组件中。这是不工作的主要组件（相当于App）的代码：

import "./styles.css";

import {
  HashRouter,
  NavLink,
  Route
} from "react-router-dom";
import React, { Component } from "react";

import Development from "./Development";
import Home from "./Home";
import Intro from "./Intro";
import Media from "./Media";
import StudyCase from './StudyCase';
import Stuff from "./Stuff";

class Main extends Component {
    constructor() {
        super();
        this.state = {
            showThumbnails: false
        };
    }
  render() {
    return (
            <HashRouter>
                <div>
                    <ul className='top-menu'>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/'>
                                Home
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/dev'>
                                Development
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs hvr-pulse' to='/media'>
                                Media
                            </NavLink>
                        </li>
                        <li>
                            <NavLink className='navs' to='/study-case'>
                                Study Case
                            </NavLink>
                        </li>
                    </ul>
                    <span className='bottom-slider'></span>
                    <div className='content'>
                        <Route exact path='/' component={Intro} />
                        <Route path='/dev' component={Development} />
                        <Route path='/media' component={Media} />
                        <Route path='/study-case' render={props => (<StudyCase {...this.state} showThumbnails={this.state.showThumbnails}/>)}/>
                    </div>
                </div>
            </HashRouter>
        );
  }
}

export default Main;

一些同事能指出我正在做的错误吗？提前感谢您的可用性。

Answer 1

在寻找解决方案几个小时后，我确定了它，而且它非常基本，所以新手可以找到答案。碰巧<StudyCase/> 组件本身有一个组件，并且状态应该存在于那里。我之前使用的画廊包的基本原理导致我出错，其中状态必须在路由器的同一页面中进行操作。以下是<StudyCase/> 组件的代码，以及工作状态，如果有人可能需要的话：

import ImageGallery from 'react-image-gallery';
import React from 'react';

class StudyCase extends React.Component {
    constructor() {
        super();
        this.state = {
            showThumbnails: false,
            showPlayButton: false,
            showFullscreenButton: false,
            showGalleryFullscreenButton: false,
        };
    }
    render() {
        return (
            <ImageGallery
                items={images}
                showThumbnails={this.state.showThumbnails}
                showPlayButton={this.state.showPlayButton && this.state.showGalleryPlayButton}
                showFullscreenButton={
                    this.state.showFullscreenButton && this.state.showGalleryFullscreenButton
                }
            />
            // <ImageGallery
            //          items={images}
            //          showThumbnails={this.state.showThumbnails} />;
        );
    }
}

const images = [
    {
        original: 'https://picsum.photos/id/1018/1000/600/',
        thumbnail: 'https://picsum.photos/id/1018/250/150/',
    },
    {
        original: 'https://picsum.photos/id/1015/1000/600/',
        thumbnail: 'https://picsum.photos/id/1015/250/150/',
    },
    {
        original: 'https://picsum.photos/id/1019/1000/600/',
        thumbnail: 'https://picsum.photos/id/1019/250/150/',
    },
];

export default StudyCase;