Javascript 我想在React中的上一个组件上方显示模态

我使用elasticsearch显示搜索结果，我使用React Router v4 Link在React的模式中显示单个组件。我想在results组件上方显示模式，但实际上它正在模式中打开一个新页面，而背景中没有任何内容

这是我的密码：

Routes.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from '../components/app';
import Header from '../components/header';
import Footer from '../components/footer';
import Single from '../components/single';
import NoMatch from '../components/noMatch';
import createHistory from 'history/createBrowserHistory'

const history = createHistory();

class Routes extends React.Component {

render() {
    return(
        <Router history={history}>
             <div className="main">
                <Header />
                <Switch>
                    <Route exact path = "/" component={App}/>
                    <Route path = "/photo/:id/:keyw" component={Single}/> 
                    <Route path = "/*" component={NoMatch} /> 
                </Switch>
                <Footer />
            </div>
        </Router>
    )
}
}

 export default Routes; 

import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazy-load';
import {
  Link
} from 'react-router-dom';

class SearchResults extends React.Component {

constructor(props) {
    super(props);
    this.state = { results: [] }
}

render () {
    return (
        <div className="cont">
            <hr />
            <ul>
            { this.props.results.map((result) => {
                return (
                            <li key={ result._source.file_name }>
                                <LazyLoad className="lazy">
                                    <Link to={"/photo/" + result._source.file_name + "/" + result._source.keywords}>
                                        <img className="image" src={"http://localhost:3000/photos/" + result._source.file_name} alt="Search Result" />
                                    </Link>
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

import React from 'react';
import { Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom';

let str;

class Single extends React.Component {

constructor(props) {
    super(props);
    this.state = {showModal: true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
}

close() {
    this.setState({ showModal: false });
}

open() {
      if(this.refs.check){
        this.setState({ showModal: true });
      }
}
render() {
    return (
        <Modal show={this.state.showModal} onHide={this.close}>
            <div className="cent">
                <div>
                    <img className="image" src={"/photos/" + this.props.match.params.id} alt={this.props.match.params.id}/>
                </div>
                <div>
                    <h1>File Name: {str = this.props.match.params.id.slice(0, -4)}</h1>
                    <h2><a className="btn btn-success" href={"/ai/" + str + ".ai"}>Download .ai file</a></h2>
                    <h2><a className="btn btn-success" href={"/eps/" + str + ".eps"}>Download .eps file</a></h2>
                    <h3>Keywords : <li>{this.props.match.params.keyw}</li></h3>
                    <Link to="/" className="btn btn-primary">Go Back</Link>
                </div>
            </div>
        </Modal>
    )
}
}

export default Single;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
从“../components/App”导入应用程序；
从“../components/Header”导入标题；
从“../components/Footer”导入页脚；
从“../components/Single”导入单个；
从“../components/NoMatch”导入NoMatch；
从“历史记录/createBrowserHistory”导入createHistory
const history=createHistory（）；
类。组件{
render（）{
返回(
)
}
}
导出默认路径；

我想要的组件应该保持不变，而不是重新渲染：

Searchresults.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from '../components/app';
import Header from '../components/header';
import Footer from '../components/footer';
import Single from '../components/single';
import NoMatch from '../components/noMatch';
import createHistory from 'history/createBrowserHistory'

const history = createHistory();

class Routes extends React.Component {

render() {
    return(
        <Router history={history}>
             <div className="main">
                <Header />
                <Switch>
                    <Route exact path = "/" component={App}/>
                    <Route path = "/photo/:id/:keyw" component={Single}/> 
                    <Route path = "/*" component={NoMatch} /> 
                </Switch>
                <Footer />
            </div>
        </Router>
    )
}
}

 export default Routes; 

import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazy-load';
import {
  Link
} from 'react-router-dom';

class SearchResults extends React.Component {

constructor(props) {
    super(props);
    this.state = { results: [] }
}

render () {
    return (
        <div className="cont">
            <hr />
            <ul>
            { this.props.results.map((result) => {
                return (
                            <li key={ result._source.file_name }>
                                <LazyLoad className="lazy">
                                    <Link to={"/photo/" + result._source.file_name + "/" + result._source.keywords}>
                                        <img className="image" src={"http://localhost:3000/photos/" + result._source.file_name} alt="Search Result" />
                                    </Link>
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

import React from 'react';
import { Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom';

let str;

class Single extends React.Component {

constructor(props) {
    super(props);
    this.state = {showModal: true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
}

close() {
    this.setState({ showModal: false });
}

open() {
      if(this.refs.check){
        this.setState({ showModal: true });
      }
}
render() {
    return (
        <Modal show={this.state.showModal} onHide={this.close}>
            <div className="cent">
                <div>
                    <img className="image" src={"/photos/" + this.props.match.params.id} alt={this.props.match.params.id}/>
                </div>
                <div>
                    <h1>File Name: {str = this.props.match.params.id.slice(0, -4)}</h1>
                    <h2><a className="btn btn-success" href={"/ai/" + str + ".ai"}>Download .ai file</a></h2>
                    <h2><a className="btn btn-success" href={"/eps/" + str + ".eps"}>Download .eps file</a></h2>
                    <h3>Keywords : <li>{this.props.match.params.keyw}</li></h3>
                    <Link to="/" className="btn btn-primary">Go Back</Link>
                </div>
            </div>
        </Modal>
    )
}
}

export default Single;

从“React”导入React；
从“道具类型”导入道具类型；
从“反应惰性负载”导入懒散负载；
进口{
链接
}从“反应路由器dom”；
类SearchResults扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={results:[]}
}
渲染（）{
返回(


{this.props.results.map（（result）=>{
返回(


) }) }      

)
}
}
SearchResults.propTypes={
结果：PropTypes.array
}
导出默认搜索结果；

Single.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from '../components/app';
import Header from '../components/header';
import Footer from '../components/footer';
import Single from '../components/single';
import NoMatch from '../components/noMatch';
import createHistory from 'history/createBrowserHistory'

const history = createHistory();

class Routes extends React.Component {

render() {
    return(
        <Router history={history}>
             <div className="main">
                <Header />
                <Switch>
                    <Route exact path = "/" component={App}/>
                    <Route path = "/photo/:id/:keyw" component={Single}/> 
                    <Route path = "/*" component={NoMatch} /> 
                </Switch>
                <Footer />
            </div>
        </Router>
    )
}
}

 export default Routes; 

import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazy-load';
import {
  Link
} from 'react-router-dom';

class SearchResults extends React.Component {

constructor(props) {
    super(props);
    this.state = { results: [] }
}

render () {
    return (
        <div className="cont">
            <hr />
            <ul>
            { this.props.results.map((result) => {
                return (
                            <li key={ result._source.file_name }>
                                <LazyLoad className="lazy">
                                    <Link to={"/photo/" + result._source.file_name + "/" + result._source.keywords}>
                                        <img className="image" src={"http://localhost:3000/photos/" + result._source.file_name} alt="Search Result" />
                                    </Link>
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

import React from 'react';
import { Modal } from 'react-bootstrap';
import { Link } from 'react-router-dom';

let str;

class Single extends React.Component {

constructor(props) {
    super(props);
    this.state = {showModal: true};
    this.open = this.open.bind(this);
    this.close = this.close.bind(this);
}

close() {
    this.setState({ showModal: false });
}

open() {
      if(this.refs.check){
        this.setState({ showModal: true });
      }
}
render() {
    return (
        <Modal show={this.state.showModal} onHide={this.close}>
            <div className="cent">
                <div>
                    <img className="image" src={"/photos/" + this.props.match.params.id} alt={this.props.match.params.id}/>
                </div>
                <div>
                    <h1>File Name: {str = this.props.match.params.id.slice(0, -4)}</h1>
                    <h2><a className="btn btn-success" href={"/ai/" + str + ".ai"}>Download .ai file</a></h2>
                    <h2><a className="btn btn-success" href={"/eps/" + str + ".eps"}>Download .eps file</a></h2>
                    <h3>Keywords : <li>{this.props.match.params.keyw}</li></h3>
                    <Link to="/" className="btn btn-primary">Go Back</Link>
                </div>
            </div>
        </Modal>
    )
}
}

export default Single;

从“React”导入React；
从'react bootstrap'导入{Modal}；
从'react router dom'导入{Link}；
让str；
类扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={showmodel:true}；
this.open=this.open.bind（this）；
this.close=this.close.bind（this）；
}
关闭（）{
this.setState（{showmodel:false}）；
}
开（）{
如果（本参考检查）{
this.setState（{showmodel:true}）；
}
}
render（）{
返回(
文件名：{str=this.props.match.params.id.slice（0，-4）}
关键词：
{this.props.match.params.keyw}
回去
)
}
}
导出默认单；

---

请帮我做这件事。提前感谢

这是因为您已经为其配置了路由，而不是路由，有一个单击事件，它将道具更改为组件并打开modal@ShubhamKhatri，我听不懂你说的话。你能演示一下吗？这是因为你已经为它配置了一个路由，而不是路由，有一个点击事件，它会将道具更改为组件并打开modal@ShubhamKhatri，我听不懂你说的话。你能示范一下吗？