如何将状态传递给 Router 渲染的组件

Question

我正在制作一个 React 作品集，其中一个组件将是一个图片库（不用说我是 React 的新手，我想知道，否则我不会问这个问题）。为此，我将使用一个包 (react-image-gallery)，它允许我自定义多个项目。我已经安装了，运行良好，但我需要对其进行自定义 - 隐藏缩略图和 "play" 和 "fullscreen" 按钮。

根据文档，可以通过状态执行此操作。问题是我没有这样做，因为应用程序的导航使用了路由器，尽管我很努力，但我无法将状态传递到放置在路由器上的组件中。这是不起作用的主要组件（相当于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/> 组件本身有一个组件，状态应该存在于那里。我之前使用的 gallery 包的基本原理导致我出错，其中状态必须在路由器的同一页面中进行操作。这是 <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;

如何将状态传递给 Router 渲染的组件

How to pass state to components rendered by Router

portfolio

gallery

reactjs